Почему не все элементы удаляются?

Question

[Nikolino]

Хочу удалить все div с классом test

Делаю через цикл for.

Если в цикле пишем i++, то удаляются не все элементы, если i+1, то все.

Почему так?

https://jsfiddle.net/nikolino/u9o1a2fj/

Answer 1

[Антон Антон]

Стандартная ошибка обхода массива с одновременной модификацией.
Используйте другой подход:

С конца:

var divs = document.getElementsByClassName('test');
    var i;
    for (i = divs.length-1; i >=0; i--) {
      divs[i].remove();
    }

или в цикле while

var divs = document.getElementsByClassName('test');
    while (divs.length) {
      divs[0].remove();
    }

Answer 2

[Stalker_RED]

getElementsByClassName возвращет HTMLCollection.

HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

Вы удаляете первый элемент, и тот что был вторым становится первым. А ваш цикл "думает" что вы его уже удалили.

Можно пройтись по этой коллекции в обратном порядке
for(i = divs.length - 1; i >= 0; i--)
Или можно преобразовать коллекцию в массив
divs = Array.from(divs)
Или вообще не использовать for

while(divs[0])
  divs[0].remove()

Comments

[Nikolino]

а почему если пишем i+1, то работает? Ведь тот что был вторым элементом, он становится первым, стало быть тоже должен пропускаться в цикле.

[Stalker_RED]

Nikolino, где вы пишете i+1?

[Stalker_RED]

Nikolino,
Если у вас в финальном выражении написано i+1, то у вас i всегда остается равным нулю.
С таким-же успехом там любую ерунду можно написать.

for (i = 0; divs.length; 'еноты крупнее слонов') {
      divs[i].remove();
    }

[Nikolino]

Stalker_RED, точно, спасибо.