JavaScript - seltsamer Fehler entfernt Element nicht

Question

Ich habe ein seltsames Problem mit meiner einfachen to-do-App. Seine Hauptmerkmale sind das Hinzufügen neuer Elemente zu "ul" und das Klicken auf "li", um seine Klasse zu ändern. Nach dem Klicken auf das Element fügt es auch ein "i" mit dem font-awesome-Symbol hinzu und nach einem erneuten Klick sollte es entfernt werden. Es funktioniert gut, wenn ich auf hinzugefügte Elemente von oben nach unten klicke, aber wenn ich von unten nach oben klicke, wird "i" nur vom ersten Element von oben entfernt. Ich kann nicht herausfinden, warum das so ist, also würde ich jede Hilfe zu schätzen wissen. Hier

ist Live-Demo, wo man diesen Fehler reproduzieren: https://michalgrochowski.github.io/to-do/

Und hier ist der Code für diese Aktion:

document.getElementById("list").addEventListener("click", function(e) { 
    if (e.target && e.target.matches("li.item")) { 
    e.target.className = "itemDone"; 
    var check = document.createElement("i"); 
    check.className = "fa fa-check done"; 
    e.target.appendChild(check); 
    } else if (e.target && e.target.matches("li.itemDone")) { 
    e.target.className = "item"; 
    var done = document.getElementsByClassName("done"); 
    var i; 
    for (i = 0; i < done.length; i++) { 
     e.target.removeChild(done[i]); 
    }; 
    }; 
}); 

ich getestet habe es in Firefox und Chrome, so ist es Nicht browserbezogen, es muss etwas im Code sein. Ich dachte, vielleicht ist das Problem mit der Schleife innerhalb der Funktion, aber ich weiß nicht, wie man es ändert.

Answer 1

var done = document.getElementsByClassName("done"); ruft eine Liste aller .done Elemente in Ihrem Dokument ab (einschließlich derjenigen, die keine untergeordneten Elemente von e.target sind). Bei der Ausführung von e.target.removeChild(done[i]), wenn der aktuelle done[i] ein Kind von e.target ist, wird es entfernt, andernfalls wird ein Fehler ausgegeben, der besagt, dass das Element done[i] kein Kind von e.target ist. Versuchen Sie folgendes:

var done = e.target.getElementsByClassName("done"); 

Hinweis: wenn es könnte Teilelemente (Kinder von Kindern ...) sein von e.target, die die Klasse .done haben. Dies wird auch einen Fehler werfen. Denn dann sind die Unterkinder keine direkten Kinder von e.target. removeChild arbeiten nur an direkten Kindern. Sie können mithilfe dieses Problem vermeiden:

var done = e.target.children; // to get the direct children only 
var i; 
for (i = 0; i < done.length; i++) { 
    if(done[i].matches('.done') // if it matches the criteria 
     e.target.removeChild(done[i]); // remove it 
}