удаление элемента из родительского узла с помощью цикла

Question

Сегодня мне нужно решить эту борьбу, поэтому у меня есть массив HTML-элементов (например, 3 входа), и я хочу удалить каждый элемент из DOM. поэтому я должен повторять цикл над ними, но я также не должен увеличивать значение, потому что он пропускает все остальные элементы, и это означает, что я должен удалять только первый элемент массива, пока он не существует, поэтому для этой задачи я использую этот код

 while(inputs[0]) {
    inputs[0].parentNode.removeChild(inputs[0]);
 }

и это прекрасно работает и удаляет все элементы. а как насчет for...of петли? он также получает каждое значение массива, и что, если я просто удаляю первый вход каждый раз, когда он получает элемент из массива? вот так:

for(input of inputs){
    inputs[0].parentNode.removeChild(inputs[0]);
}

я тоже попробовал это и в 3 входах оставил третий (не удалил), так что я хочу знать почему? Может кто-нибудь показать мне, как он пропустил третий? (графическое объяснение будет лучшим)

Спасибо

Answer 1

На первой итерации итератор находится в нулевой позиции, есть три элемента. Вы удаляете один.

 v
 0 1 2

На второй итерации итератор находится на первой позиции, там два элемента. Вы удаляете один.

   v
 0 1

На третьей итерации итерация останавливается, поскольку имеется только один элемент, а индекс равен трем, поэтому он находится за пределами массива. Операция удаления не выполняется.

      v
 0

Основная проблема / преимущество в том, что nodes - это живая коллекция . Если он не будет активным (например, если вы используете querySelectorAll), тогда будет работать вторая версия:

 //     v declare variables!
 for(const input of document.querySelectorAll("input"))
   input.remove(); // < remove is way easier