Remove item[i] from jQuery each loop

Question

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

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

Answer 1

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.

Answer 2

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;
});

Answer 3

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']

Answer 4

the solution is below:

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

Answer 5

Something like

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

Answer 6

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)

Answer 7

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. Eg:

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);
});