搜索完成后从搜索结果中删除/隐藏标记 -Leaflet

Question

In my current code, I am able to search and display a marker on the search location but when I remove text from the search bar or close search bar marker is still visible on map .until I refresh the page I can visualize the search result marker on the map. how can I hide or remove the search result marker from the map once I close the search bar or remove text from the search bar?

//add Search Control so load the Geojson of point of interest
    var featuresLayer = new L.GeoJSON(data);
  
    var Icon = L.icon({
            iconUrl: 'icon-red.png',
            
            iconSize:     [25, 41], // size of the icon
            iconAnchor:   [13, 38], // point of the icon which will correspond to marker's location
            popupAnchor:  [1, -34], // point from which the popup should open relative to the iconAnchor
            shadowSize: [41, 41] // shadow casting of icon
    });
    
    var searchControl = new L.Control.Search({
        layer: featuresLayer,
        propertyName: 'name',
        autoCollapse: false,
        collapsed:false,
        autoType: false,
        position:'topright',
        moveToLocation: function(latlng, title, map) {
            map.setView(latlng, 17); // access the zoom
            console.log(latlng);
            L.marker(latlng, {icon: Icon}).addTo(map).bindPopup('<h4>'+ latlng.layer.feature.properties.name +'</h4>').openPopup();
            },   
    });
    
    //inizialize search control
    map.addControl(searchControl);     

Answer 1

Save your marker to a variable and remove it after the event 'search:collapsed' is fired:

var searchMarker = null;
var searchControl = new L.Control.Search({
        layer: featuresLayer,
        propertyName: 'name',
        autoCollapse: false,
        collapsed:false,
        autoType: false,
        position:'topright',
        moveToLocation: function(latlng, title, map) {
            map.setView(latlng, 17); // access the zoom
            console.log(latlng);
            searchMarker = L.marker(latlng, {icon: Icon}).addTo(map).bindPopup('<h4>'+ latlng.layer.feature.properties.name +'</h4>').openPopup();
            },   
    });

searchControl.on('search:cancel',()=>{
   if(searchMarker && map.hasLayer(searchMarker)){
       searchMarker.removeFrom(map);
       searchMarker = null;
   }
});