removeChild(); nicht alle Elemente aus der Liste entfernen

Question

Wenn ich den folgenden Code ausführen, wird die Hälfte der Elemente aus der Liste entfernt. Ich versuche, alle Elemente aus der Liste zu entfernen.

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 
     console.log(ul.children.length); 

     //Moves through the unordered list and removes each list item. 
     for(let i = 0; i < ul.children.length; i++) { 
     ul.removeChild(ul.children[i]); 
     } 
    }); 

Answer 1

Der Grund Code scheinbar zufällig scheint, ist durch:

for(let i = 0; i < ul.children.length; i++) { 
    ul.removeChild(ul.children[i]); 
} 

Wie Sie Elemente aus der UL entfernt werden soll, ist es Kinderlänge wird kleiner, so ul.children.length wird von n, zu n-1, zu n-2 usw. reduziert. Allerdings ist Ihre i steigt. Schließlich wird i größer sein als ul.children.length sogar dachte, dass Kinder übrig bleiben. Als i steigt, werden Ihre Kinder in UL kleiner, jedoch entfernen Sie zuerst von der 0. Es bedeutet also, dass Sie auch versuchen werden, Elemente zu entfernen, die nicht existieren, wie sie jetzt in [0] sind.

ich geändert Code auf diese folgende:

document.getElementById('reset').addEventListener('click', (e) => { 
    const ul = document.getElementById("myUL"); 

    while (ul.children[0]) { 
    ul.removeChild(ul.children[0]) 
    } 
}); 

Answer 2

Sie könnten dies tun, würde der Code noch kompakter

jquery Lösung

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 

     $(ul).empty(); 

    }); 

Diese Funktion entfernt alle Kinder des Vaters Objekt

.empty(); 

html Standardlösung

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 

     ul.innerHTML =""; 

    }); 

Diese Variable stellt den HTML-Inhalt des übergeordneten Objekts

.innerHTML ="" 

Answer 3

Sie werden über eine Liste iterieren und in der Iteration die Liste manipulieren Elemente zu entfernen. Dies verursacht das Problem.

Für alle Elemente in Ihrem Knoten zu entfernen, können Sie einfach tun:

document.getElementById("myUL").innerHTML = ''; 

Andernfalls, wenn Sie aus irgendeinem Grund Schleifen mögen, tun:

var el = document.getElementById("myUL"); 
while (el.firstChild) { 
    el.removeChild(el.firstChild); 
}