В чем причина ошибки при цикличном вызове метода remove() для удаления элементов?

Question

[romaro]

Пытаюсь реализовать метод класса, который очищает форму от всех блоков с ошибками:

errCleaner() {
                let jsErrBlocks = document.querySelectorAll('.js-err-block');

                for (let key in jsErrBlocks) {
                    jsErrBlocks[key].remove();
                }
            }

Этот код исправно удаляет два блока, которые были найдены через querySelectorAll, но в консоли получаю ошибку, как будто цикл пытается сделать дополнительную итерацию:

Comments

[ViruSkin]

Ты перебираешь массив, но при этом удаляешь элементы и размер массива сокращается, но итерация по массиву продолжается

Answer 1

[Сергей Соколов]

Вместо jsErrBlocks[key].remove(); выведите в консоль каждый jsErrBlocks[key] — увидите, там не только цифровые индексы с найденными элементами.

for .. in пробежится по всем перечисляемым свойствам, включая унаследованные. Там будут и item, key, values, entries, forEach, length

Поэтому варианты:

1. jsErrBlocks.forEach((item) => item.remove())
   
2. for .. of, как уже посоветовали
   
3. сделать массив [...jsErrBlocks] – в него попадут только найденные элементы
   
4. for (let i = 0; i < jsErrBlocks.length; i++)