How to remove an arbitrary element from a JavaScript array?

Question

In my Google Maps application I can place markers on the map, and I keep a reference to each of the markers placed, along with some extra information in an array called markers.

Adding markers is easy, I just push() the newly created object onto the array (markers.push(marker));

However, when it comes to removing an arbitrary marker from the array, given an index of the slot, it doesn't behave as expected. My function is:

function deleteMarker(markerIndex) {
    if (markerIndex!='' && markerIndex>=0 && markerIndex<markers.length) {
     if (confirm('Do you really want to remove this marker from the map?')) {
      alert('deleting marker '+markerIndex); //debugging purposes
      markers.splice (markerIndex, 1);
     }
    }
}

I have no previous experience with the splice() function, but looking at its description @ w3schools it seems to be pretty straight-forward. However, I get the following behaviour:

markers.splice() does nothing. So what am I doing wrong?

And also, when markerIndex is 0 no confirmation box is shown. At first I assumed the lengthy if-condition evaluated to false and so the whole code block was skipped, however, using Firebug to step through the calls I found out that the condition holds (of course) for index 0 when array is non-empty, next step reveals that the if (confirm(...)) and alert('deleting...) are skipped and markers.splice() is called (but nothing happens). This behaviour is so strange I decided to open this question.

Can anyone please clarify what's going on?

I thought that deleting markers will be the easiest bit of functionality one could do. I can add them, edit their contents, even clear all markers (pop()-ing markers off the markers array until empty) and all works nicely.

Answer 1

One problem with your code is that JavaScript interprets 0 == '' as true, so for a markerIndex of zero, your confirm-code is not executed. I guess that you misinterpreted the steps Firebug shows or that it simply is buggy here since your if-condition will in fact evaluate to false for a markerIndex of 0.

You can use type-strict comparison by adding an extra =:

if (markerIndex !== '' && ...) {

An easier approach would be:

if (markers[markerIndex] !== undefined) {

Since JavaScript does not raise an error when accessing undefined object members.

Your other problem with splice() not working is weird (it should work).

Answer 2

not sure if this is what is happening here. but i've seen the same code run differently in firebug when it is being debugged v when it is not being debugged. i'm pretty sure i had no watches that were interfering with the code either.

Answer 3

function deleteMarker(markerIndex) {
    if (markers[markerIndex] !== undefined) {
     if (confirm('Do you really want to remove this marker from the map?')) {
      map.removeOverlay(markers[markerIndex]);
      markers.splice (markerIndex, 1);
     }
    }
}

This seems to take care of all the problems. Thanks for your answers, much appreciated. I especially like the idea of reducing the first if-condition to just:

if (markers[markerIndex] !== undefined)

splice() seems to operate directly on the array (contrary to what NuclearDog hinted) and it works as expected. My dearest Firebug mislead me.