CODEWITHSUNDEEP
javascriptjquery
bcm
bcm

Reputation: 5500

Remove item[i] from jQuery each loop

How do I remove an item[i] from items once it reaches in:

$.each(items, function(i) {
    // how to remove this from items
});

Upvotes: 37

Views: 56178

Answers (7)

Kurtis Jungersen
Kurtis Jungersen

Reputation: 2554

Although I would typically prefer using $.grep() to filter the array, I have an instance where I'm already using $.each() on the array to process a dataset. After doing some processing, I can determine whether or not the item needs to be removed from the array:

// WARNING - DON'T DO THIS:
$.each(someArray, function(index, item) {
    // Some logic here, using 'item'

    if (removeItem) {
        // Spice this item from the array
        someArray.splice(index, 1)
    }

    // More logic here
});

WARNING: This presents a new problem! Once the item has been spliced from the array, jQuery will still loop for the length of the original array. E.g.:

var foo = [1,2,3,4,5];

$.each(foo, function(i, item) {
    console.log(i + ' -- ' + item);
    if (i == 3){ 
        foo.splice(i, 1); 
    }
});

Will output:

0 -- 1
1 -- 2
2 -- 3
3 -- 4
4 -- undefined

And foo is now [1, 2, 3, 5]. Every item in the array is "shifted" relative to the jQuery loop, and we missed the element "5" altogether, and the last item in the loop is undefined. The best way to solve this is to use a reverse for loop (going from arr.length - 1 to 0). This will ensure that removing an element won't affect the next item in the loop. However since the question here is with respect to $.each, there are a few alternative ways of solving this:

1) $.grep() the array before looping

var someArray = $.grep(someArray, function(item) {
    // Some logic here, using 'item'

    return removeItem == false;
});

$.each(someArray, function(index, item) {
    // More logic here
});

2) Push items into another array

var choiceArray = [ ];

$.each(someArray, function(index, item) {
    // Some logic here, using 'item'

    if (removeItem) {
        // break out of this iteration and continue
        return true; 
    }

    // More logic here

    // Push good items into the new array
    choiceArray.push(item);
});

Upvotes: 1

Netsi1964
Netsi1964

Reputation: 3620

As mentioned by @lonesomday above (I simply couldn't add this in a comment) grep is for Arrays, but you could insert your selector inside grep:

var items = $.grep($(".myselector", function (el, i) {
  return (i===5) ? false : true;
};

This would store all elements found using $(".myselector")in ìtems` leaving out the item at the 6th position (the list is 0 indexed, which makes "5" the 6th element)

Upvotes: 1

Evren Kutar
Evren Kutar

Reputation: 1213

the solution is below:

_.each(data, function (item, queue) {
    if (somecondition) {
        delete data[queue]
    }
});

Upvotes: 4

leeny
leeny

Reputation: 626

If you want to remove an element from array, use splice()

var myArray =['a','b','c','d'];
var indexToRemove = 1;
// first argument below is the index to remove at, 
//second argument is num of elements to remove
myArray.splice(indexToRemove , 1);

myArray will now contain ['a','c','d']

Upvotes: 9

lonesomeday
lonesomeday

Reputation: 237905

It would be better not to use $.each in this case. Use $.grep instead. This loops through an array in pretty much the same way as $.each with one exception. If you return true from the callback, the element is retained. Otherwise, it is removed from the array.

Your code should look something like this:

items = $.grep(items, function (el, i) {
    if (i === 5) { // or whatever
        return false;
    }

    // do your normal code on el

    return true; // keep the element in the array
});

One more note: this in the context of a $.grep callback is set to window, not to the array element.

Upvotes: 120

David Tang
David Tang

Reputation: 93684

I'm guessing you want $.map. You can return null to remove an item, and not worry about how indices might shift:

items = $.map(items, function (item, index) {
    if (index < 10) return null; // Removes the first 10 elements;
    return item;
});

Upvotes: 11

Aliostad
Aliostad

Reputation: 81660

Something like

var indexToBeRemoved = 3; // just an illustration
$.each(items, function(i) {
    if(i==indexToBeRemoved){
        $(this).remove();
    }
});

Upvotes: 2

Related Questions