How can I remove a single overlay in Openlayers 3.3.0? - overlay

Question

I am creating overlays in my mapping application that I need to refresh every 5 seconds. I am only having difficulties removing the stale overlay from my map using the code below. The map.removeOverlay method does not seem to be working correctly. The stacking of the overlays is visibly apparent after only a few iterations.
Using map.getOVerlays().clear() removes the stale overlay, however, this removes all overlays which is not desired. Any assistance with this is appreciated.
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
$.getJSON('json/DATA.json', function(data) {
$.each(data.item, function(key, val) {
var storeName = this.name;
var storeLocation = this.location;
var storeLatitude = this.latitude;
var storeLongitude = this.longitude;
$.each(val.tasks, function(i, j){
var taskName = this.name;
var taskState = this.state;
if (taskState == "Open") {
var taskGeometry = ol.proj.transform([storeLongitude,storeLatitude], 'EPSG:4326', 'EPSG:3857');
function createCircleOutOverlay(position) {
var elem = document.createElement('div');
elem.setAttribute('class', 'circleOut');
return new ol.Overlay({
element: elem,
position: position,
positioning: 'center-center'
});
}
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
map.addOverlay(taskOverlay);
}
});
});
});
}, 5000);

Answer 1

var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
The problem is that you are trying to remove the new overlay and not the old one. You would have to store a reference to the overlay so that OpenLayers can remove it from the map. Something like:
var currentOverlay = null;
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
// ...
if (currentOverlay === null) {
map.removeOverlay(currentOverlay);
}
currentOverlay = createCircleOutOverlay(taskGeometry);
map.addOverlay(currentOverlay);
// ...