jQuery remove array element and refresh

Question

I think it's too late at night for me to figure this out. Basically, I have a master array. I loop over it and remove an element if I find it. I do this for 4 elements.

In the end I want to display any leftover elements. The problem is that I'm not refreshing my array correctly after I remove an element.

Here's the code I'm using which I feel is too much brute force and not enough elegance.

var masks = ["valueOne","valueTwo","valueThree","valueFour","valueFive"]; 

    $.each(masks,function(key,value){ 
        if("valueOne" === value){
            // do something
            masks.splice($.inArray(value, masks),1); 
        }else if("valueTwo" === value){
            // do something
            masks.splice($.inArray(value, masks),1);
        }else if("valueThree" === value){
            masks.splice($.inArray(value, masks),1);
        }else if("valueFour" === value){
            // do something
            masks.splice($.inArray(value, masks),1);
        }
    });
    console.log( masks.toString() );

I'd expect the console to log "valueFive" but it doesn't. It logs this:

valueTwo,valueFour,valueFive

What's the correct way to refresh an array after updating it? Thanks for any helpful tips.

@fument np. For something like this, the diff methods using filter/indexof shown there are probably worth considering too since you'll probably be able to tell how they work 3 months from now when you start wondering what on earth the code you wrote does. — pvg, Dec 01 '15 at 05:25

score 4 · Accepted Answer · answered Dec 01 '15 at 05:15

The issue is that $.each() is iterating through the array by its indices.

(function(key,value){ ... })( 0, "valueOne" );
(function(key,value){ ... })( 1, "valueThree" );
(function(key,value){ ... })( 2, "valueFive" );

"valueTwo" and "valueFour" are skipped because .splice() modifies the array, shifting them to an index that has already been visited by $.each().

masks[0] === "valueTwo"
masks[1] === "valueFour"

A quick solution to this is to provide a clone of the Array to iterate over, one that remains unaltered throughout, so you can safely modify the original.

$.each(masks.slice(0), function (key, value) {
    // ...
});

score 1 · Answer 2 · answered Dec 01 '15 at 05:39

Here is the code dude...

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var masks = ["valueOne","valueTwo","valueThree","valueFour","valueFive"]; 
var count = 0;
    $.each(masks,function(key,value){ 
        //console.log( masks.toString() );
        key = key - count;
        //console.log(masks[key]);
        if("valueOne" === masks[key]){
            masks.splice($.inArray(masks[key], masks),1); 
            count++;
        }
        if("valueTwo" === masks[key]){
            masks.splice($.inArray(masks[key], masks),1);
            count++;
        }
        if("valueThree" === masks[key]){
            masks.splice($.inArray(masks[key], masks),1);
            count++;
        }
        if("valueFour" === masks[key]){
            masks.splice($.inArray(masks[key], masks),1);
            count++;
        }
    });
    console.log( masks.toString() );
    </script>

score 0 · Answer 3 · answered Dec 01 '15 at 08:30

I think the proper way would be to use array.filter method of JavaScript. Filter expects a function and removes an element if this function returns false.

mask.filter(function(elem, index, array) {
    if(elem==="value") return false;
    return true;
}

jQuery remove array element and refresh

3 Answers3