JavaScript - 不思議なバグで要素が削除されない

Question

私は簡単なやり方で奇妙な問題を抱えています。その主な機能は、 "ul"に新しい要素を追加し、 "li"をクリックしてそのクラスを変更することです。要素をクリックした後、「i」にfont-awesomeアイコンが追加され、もう一度クリックすると削除されます。追加された要素を上から下にクリックするとうまくいきますが、下から上へクリックすると、最初の要素から上から "i"だけが削除されます。なぜそれが分からないので、私はどんな助けにも感謝します。ここで

は、このバグを再現することができ、ライブデモです： https://michalgrochowski.github.io/to-do/

そして、ここではその行動に責任コードです：

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]); 
    }; 
    }; 
}); 

私はFirefoxとクロームでそれをテストしてみたので、それはですブラウザ関連ではなく、コード内の何かでなければなりません。関数内のループに問題があるかもしれないと思っていましたが、変更方法はわかりません。

Answer 1

var done = document.getElementsByClassName("done");は、文書内のすべての.done要素のリスト（子要素がe.targetでない人を含む）を取得します。したがって、現在のdone[i]がe.targetの子である場合はe.target.removeChild(done[i])を実行すると削除されます。そうでない場合は、done[i]がe.targetの子ではないというエラーが発生します。サブ要素（子の子...）があることができれば、クラス.doneを持ってe.targetの：

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

注：これを試してみてください。これでもエラーが発生します。そのため、サブ子供はe.targetの直接の子供ではありません。 removeChildは直属の子供のみで動作します。 `の実行に失敗しました「のremoveChild」「ノード」上：：;`ので

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 
}