OpenLayers - Clearing markers from search results when entering a new search

I've created a map with different Layers from OpenLayers, Openstreetmap and BingMaps. I've used the OpenLayers Control Geocoder (CSS and Javascript file) from

Now I want to add the function, that if there is a new search entered, the old marker should automatically disappear and the new search result should show up. At the moment, all the markers will stay on the map. I already tried different solutions here on stackoverflow, but none of them worked so far. Thank you.

Here is the code from my main.js.

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Text from 'ol/style/Text';
import Stroke from 'ol/style/Stroke';
import * as olProj from 'ol/proj';
import OSM from 'ol/source/OSM';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stamen from 'ol/source/Stamen';
import BingMaps from 'ol/source/BingMaps';
import LayerSwitcher from 'ol/source/ol-layerswitcher';
import Geocoder from 'ol/source/ol-geocoder';

const map = new Map({
  target: 'map',
  view: new View({
    center: olProj.fromLonLat([16.372, 48.209]),
    zoom: 14

map.addLayer(new TileLayer({
    title: 'watercolor',
    type: 'base',
    source: new Stamen({
        layer: 'watercolor',
        visible: false

map.addLayer(new TileLayer({
    title: 'Bing',
    type: 'base',
    source: new BingMaps({
    key: 'Auj_QkN4cbeT0AIn4Dq-lLk1zsqobx3tpwmekXJgjSFFp0AN48MsogkxCjGZkns9',
    imagerySet: 'Aerial',
    visible: false

map.addLayer(new TileLayer({
    title: 'OSM',
    type: 'base',
    source: new OSM()

const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(255,255,255,0.4)'
    stroke: new Stroke({
      color: '#3399CC',
      width: 1.25
    radius: 15
map.addControl(new LayerSwitcher());

//Coordinate Search

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: 'ACfOgoF7JNAG57XQv72HzpCEoSo8hQmZ',
  lang: 'de-AT', //en-US, fr-FR
  placeholder: 'Search for...',
  targetType: 'glass-button',
  limit: 5,
  keepOpen: true

geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';

geocoder.on('addresschosen', function(evt) {
  // it's up to you;

if (layersOnMap) {

function onDrawStart(event)
    var features = tempVectorSource.getFeatures();
    for(var i=0;i<features.length;i++)
        features[i].setGeometry(new ol.geom.Point([]));