Удаление дочернего элемента в контейнере с помощью removeChild() не работает

Question

Я создал образец файла, который добавляет и удаляет дочерние элементы в материнском элементе. Добавление было успешным, но у меня возникла проблема с удалением дочерних элементов. Цель каждого нажатия кнопки удаления удаляет дочерний элемент.

var adds = document.querySelector('#add'); 
 
    var remove = document.querySelector('#remove'); 
 
    var section = document.querySelector('section'); 
 
    var div; 
 
    
 
    adds.onclick = function() { 
 
    \t div = document.createElement('div'); 
 
    \t section.appendChild(div); 
 
    \t div.classList.add('style'); 
 
    }; 
 
    
 
    // THE PROBLEM 
 
    remove.onclick = function() { 
 
    \t while(section.children.length !== 0) { 
 
    \t \t for(var c in section.children) { 
 
    \t \t \t section.removeChild(div[c]); 
 
    \t \t } 
 
    \t } 
 
    };

section { 
 
     display: flex; 
 
    \t background: #0ff; 
 
    \t height: 100px; 
 
    \t padding: 8px; 
 
    } 
 
    section > div {margin: 0 1px;} 
 
    .style { 
 
    \t width: 100px; 
 
    \t height: 100px; 
 
    \t background: lightgreen; 
 
    }

<button id="add">Add</button> 
 
    <button id="remove">Remove</button> 
 
    
 
    <section class="container"></section> 
 
<br>

Что случилось с моим кодом?

Answer 1

Что случилось с моим кодом?

Эта линия

section.removeChild(div[c]); 

div может быть определено здесь, и в любом случае, дети РАЗДЕЛЫ являются не обязательно дети Div в

так изменить его

section.removeChild(section.children [c]); 

Кроме того, while не необходимо

remove.onclick = function() { 
     for(var c in section.children) { 
      section.removeChild(section.children[c]); 
     } 
}; 

EDIT

Цель каждый щелчок кнопкой Remove удаляет дочерний элемент .

remove.onclick = function() { 
     if(section.children length) { 
      section.removeChild(section.children[0]); 
     } 
}; 

изменил for с if