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

Question

[torbach]

Подскажите, пожалуйста, почему дочерние элементы .output удаляются не все, перед заполнением.

https://codepen.io/Ramov/pen/eYjwbPx

Answer 1

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

children – «живая» коллекция. Поэтому цикл

for (let i = 0; i < childrens.length; i++){
  childrens[i].remove();
}

удаляет через одного.

Вот, например, вариант:

while (childrens.length) {
  childrens[0].remove();
}

Comments

[torbach]

Спасибо!

[torbach]

Подскажите, а если через .childNodes, а не .children получать дочерние элементы, будет работать?

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

torbach, разберитесь, что такое элементы и что такое узлы (Nodes). Скажем, в параграфе

<p>
  Привет <span>мир!</span>
</p>

childNodes этого парграфа вернёт 3 узла: текст с "\nПриветом", элемент span и ещё текстовый с пробелами и новой строкой.

Ну и коллекция этих узлов опять будет «живая», так что те же грабли.

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

torbach, разберитесь, что такое элементы и что такое узлы (Nodes). Скажем, в параграфе

<p>
Привет <span>мир!</span>
</p>

Answer 2

[Rsa97]

output.children имеет тип HTMLCollection.

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

Таким образом, при удалении, например, элемента с индексом 0, коллекция перестраивается, все элементы смещаются, элемент, имевший индекс 1, получает индекс 0 и остаётся в списке, так как следующим вы удаляете элемент с идексом 1 (изначально 2).
Решить можно несколькими способами:

--let childrens = output.children;
++let childrens = [...output.children];

--for(let i = 0; i < childrens.length; i++){
--  childrens[i].remove();
++while (childrens.length > 0) {
++  childrens[0].remove();

--let childrens = output.children;
--for(let i = 0; i < childrens.length; i++){
--  childrens[i].remove();
--}
++output.innerHTML = '';

Answer 3

[Григорий]

1. Неверно делать const output = form.nextElementSibling; - в будущем могут появиться новые элементы и nextElementSibling будут недействительным, надо получить ссылку на конкретный элемент document.querySelector('.output')
   
2. Children сохраняет предыдущее значение и результате получается такой эффект. Подробнее тут
   
3. Два варианта как решить
   

//Удаление дочерних элементов перед заполнением
  let childrens = [...output.children]; 
  childrens.forEach(item => item.remove())

//Удаление дочерних элементов перед заполнением
  output.innerHtml = ''