JavaScript - 奇怪的錯誤不會刪除元素

我有一個奇怪的問題，與我簡單的待辦事項應用程序。它的主要特點是添加新的元素「ul」並點擊「li」來改變它的類。點擊元素後，它還會添加一個「我」與font-awesome圖標，再次單擊它之後，它應該將其刪除。當我點擊從上到下添加的元素時，它工作正常，但當我從下到上點擊時，「i」僅從頂部的第一個元素中移除。我無法弄清楚爲什麼，所以我會很感激任何幫助。JavaScript - 奇怪的錯誤不會刪除元素

這裏是現場演示，在那裏你可以重現此錯誤： 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和Chrome測試它，所以它的不是與瀏覽器相關的，它必須是代碼中的東西。我想也許問題是在函數內部的循環，但我不知道如何改變它。

來源

2017-02-09 grhu

控制檯說，錯誤是'e.target.removeChild（做[1]）：您可以通過使用該避免麻煩要刪除的節點不是此節點的子節點。檢查它使用console.log查看與元素正試圖調用removeChild方法。 – LordNeo

'e.target.getElementsByClassName（「done」）;' – 2017-02-09 16:39:59

無法在Chrome移動設備上重現。看起來對我有用。我可以添加，交叉和刪除所有命令從上到下，反向和隨機 –

var done = document.getElementsByClassName("done");獲取文檔中所有.done元素的列表（包括那些不是子元素e.target的元素）。所以當執行e.target.removeChild(done[i])如果當前done[i]是e.target的孩子，它將被刪除，否則它會拋出一個錯誤，說元素done[i]不是e.target的孩子。試試這個：

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

注：，如果有可能的e.target有類.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 
}

來源

2017-02-09 16:45:09

是的，這就解決了問題，就像@squint在評論中寫過的:) – grhu

JavaScript - 奇怪的錯誤不會刪除元素

回答

相關問題