Calling `.remove()` inside `for` loop doesn't remove all elements

Question

I use a simple for loop in jQuery. In the example below, if I delete the line calling the .remove() function, console.log outputs all elements. But if I add the call to .remove() it doesn't log all the elements anymore.

What am I doing wrong?

Note:

I know I can use $('.list').remove() to remove all elements, but this just an example. I would like to know the reason why the loop doesn't run as expected.

I also tried the .each() function and it worked fine. But I want find a solution with the for loop.

http://jsfiddle.net/53HzV/1/

$('.btn').click(function(){
    for (var i = 0; i < $('.list').length; i++) {
        console.log($('.list').eq(i));

        $('.list').eq(i).remove();
    }
});


<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

<div class="btn">btn</div>

You know you could just do `$('.list').remove()`. You're dealing with collections, that's what jQuery is all about. — elclanrs, Jul 04 '14 at 01:04
@elclanrs thanks for reply! this is example.. I use it in my function add other function... `You're dealing with collections ` ?? — user1775888, Jul 04 '14 at 01:06
Save `$('.list')` in a variable before the loop and it will work. Right now you are mutating the collection you are iterating over, which, as you noticed, can cause problems. — Felix Kling, Jul 04 '14 at 01:06
It's Python, but it's the same issue and nicely demonstrated: http://stackoverflow.com/q/6500888/218196 — Felix Kling, Jul 04 '14 at 01:13

score 4 · Accepted Answer · answered Jul 04 '14 at 01:08

4

Here is what your code is doing:

First loop: i=0, 4 divs (length=4), remove the first one (index 0)

Second loop: i=1, 3 divs (length=3), remove the second one (index 1)

Third loop: i=2, 2 divs (length=2), do nothing as i=length

Obviously your code will break at the third loop.

answered Jul 04 '14 at 01:08

Christophe

27,383
28
97
140

I guess the third iteration does not happen as it doesn't satisfy the `i < length` condition, but good answer. – Fabrício Matté Jul 04 '14 at 01:10
ohhhhh!!!! Thanks so much!!! so is it possible still use for loop to do the right way. – user1775888 Jul 04 '14 at 01:12
1

@user1775888: I gladly repeat my comment *"Save `$('.list')` in a variable before the loop"* (and of course use the variable (in case that was not clear)). – Felix Kling Jul 04 '14 at 01:14
@user1775888 use .each or put the initial length in a variable: `var initialLength=$('.list').length`. – Christophe Jul 04 '14 at 01:14
well, as @FelixKling said :-) – Christophe Jul 04 '14 at 01:15
2

@Christophe: Saving the length only has other problems. It will try to access elements that don't exist anymore. `.each` would definitely be the more jQuery-ish way. – Felix Kling Jul 04 '14 at 01:15
3

@FelixKling right, then the loop should remove the first element `$('.list').eq(0).remove();` – Christophe Jul 04 '14 at 01:17

David Atchley · Answer 2 · 2014-07-04T01:19:36.090

The best way is to restructure your code and use some features of jQuery you're not employing yet. If the idea is to remove each class=list element when the button is clicked, you could do the following:

$('.btn').click(function(){
  $('.list').each(function() {
    $(this).remove();
  });
});

This method will allow you to add in logic, if desired in the future, to check each element prior to removing it.

Your loop isn't working, because you are accessing the element to delete using the i variable and the length of the list is changing each iteration through the loop. So, in your case, since there are 4 items (meaning indexes 0-3 using .eq(i) in the loop), once you delete the first two (and i=2), $('.list').length no longer evaluates to 4, but is 2 now, so the loop exits. You'll always only remove half the items with that loop structured that way.

Calling `.remove()` inside `for` loop doesn't remove all elements

2 Answers2

Linked