How to remove marker when click button - leaflet

Question

I am creating a Leaflet Map Widget using Preact and webpack.
I have 3 buttons with a single map. Below images shows what I implemented.
when click one single button, the map will show some locations. Like wise other buttons also have each locations. First I clicked "Cemeteries" button, Its fine. locations are displaying on the map. But after that I click "Funeral Homes" button, still have the "cemeteries" locations also. When I click "crematoria" button, same problem, "cemeteries", "Funeral Homes" and "crematoria" locations are displaying together.
What I want is, when I click a one single button, map will show only the each button's locations and when I click another button, previous clicked button locations need to remove.
In my componentDidMount() I created the map.
this.state.map = createMap('mapid').setView([51.505, -0.09], 13);
let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
this.state.map.addLayer(tileLayer(
urlll,
{attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'MY_MAPBOX_ID',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MY_ACCESS_TOKEN'
})
)
After that I create 3 methods for button click events. This is a one method
handleMapCemeteries (e) {
e.preventDefault();
var locationsdemo = [
["LOCATION_1", 11.8166, 13.0942],
["LOCATION_2", 87.9804, 76.9189],
["LOCATION_3", 10.7202, 45.5621],
["LOCATION_4", 11.3889, 11.6277],
["LOCATION_5", 10.5929, 43.6325]
];
let marketIcon = icon({
iconUrl: markerIcon,
iconRetinaUrl: markerIcon,
iconAnchor: [5, 25],
popupAnchor: [10, -44],
iconSize: [25, 35],
});
for (var i = 0; i < locationsdemo.length; i++) {
markeDemo = marker([locationsdemo[i][1], locationsdemo[i][2]], {
icon: marketIcon,
draggable: true,
title: 'Hover Text',
}).bindPopup(locationsdemo[i][0]).addTo(this.state.map);
}
}
Is anyone know how to remove markers when button click?

Answer 1

Instead of adding the markers to the map (.addTo(this.state.map);) add them to a LayerGroup / FeatureGroup (make sure the group is a global variable and only initialized once):
var fg = L.featureGroup().addTo(this.state.map);
...
marker. ... .addTo(fg);
and then you can remove all markers:
fg.clearLayers();