[Solved] How can I update the marker cluster from the map based on the list of locations?

Question

In the API documentation for the Marker Clusterer add-on, the methods list contains

boolean removeMarker(marker:google.maps.Marker)
Removes a marker from the cluster.

In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function:

var map; //set scope here so various functions can use them
var markerCluster;

Then when instantiating that variable, remove the var keyword:

}
markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

Finally, in the clickHandler function, pass the marker (i.e. markers[index]) to a call to that removeMarker() method:

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}

See this demonstrated in the example below. A third marker was added to demonstrate that the cluster number goes down to 2 with the deletion of the first location.

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ],
  ["New Digha Sea Beach",
    21.617401, 87.500898
  ]
];
var markers = [];
var map; //set scope here so various functions can use them
var markerCluster;

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
google.maps.event.addDomListener(window, "load", initialize);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td><button class="deleteMarker" data-id="0">Remove</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td><button class="deleteMarker" data-id="1">Remove</button></td>
  </tr>
  
  <tr>
    <td>3</td>
    <td>New Digha Sea Beach</td>
    <td><button class="deleteMarker" data-id="2">Remove</button></td>
  </tr>
</table>
<div id="map"></div>

Accepted Answer