I am having a problem permanently removing layers or markers with leaflet marker cluster.

I can remove remove the marker and edit its CSS via its DIV ID fine. When I do it this way and delete the array, the marker does disappear and the array is deleted but when I zoom out and back in, the marker is still there? Even though the number is the cluster is down by one?

I have tried

layer.removeFrom(markerLayer);

But it says markerLayer undefined.

This deletes all markers but when zoomed in and out they are back again?

$(".leaflet-marker-icon").remove(); $(".leaflet-popup").remove();

Am I missing something here with the clusters?

I add the map markers to the cluster like so, maybe this is wrong?

The Map :-

var map = L.mapbox.map('map')
      .setView([52.450439, -1.729660], 14)
      .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
      
 var markerLayer = L.layerGroup().addTo(map);

Then to Add markers I use :-

var markers = new L.MarkerClusterGroup();
//console.log(pointsForMarker);
// Add people to the map:
var status;
var username;
pointsForMarker.forEach((point) => {

username = point.name;
status = point.status;

    var client = L.divIcon({
        className: 'location-pin',          
        html: '<img id="operatorimg" src="img/'+point.name+'.jpg"><div id='+username+' class="pin '+status+'"></div>',
        iconSize: [60, 60],
        iconAnchor: [20, 66]});

        //alert (point.name);
        var marker = L.marker ([point.lat, point.lng], {
            icon: client
        });
        
        markers.addLayer(marker);
        marker.name = point.name;
        status = point.status;
        var username = point.name;      
        marker.bindPopup(username + ' is online now and available');
    

map.addLayer(markers);

My data is saved and loaded like so :-

const pointsForMarker = [
  { name: 'SAM', lat: 52.4734975, lng: -1.4911260, ID: 100102, status: 'offline'}
]