使用刪除按鈕動態添加菜單中的項目，並選擇使用javascript進行刪除

Question

//這是一個開始的AJAX實驗室。不知道如何附上我的代碼，所以我給了分。代碼

//創建元素和文本節點與按鈕，刪除每一個捲餅，如果他們改變主意

function addingToCart(){ 
    h3 = document.createElement("h3"); 
    document.getElementById("cart").appendChild(h3);//a div in my html shown above// 
    message = document.createTextNode(itemMessage); 
    h3.appendChild(message); 
    deleteBtn = document.createElement("BUTTON"); 
    h3.appendChild(deleteBtn); 
    var textBtn = document.createTextNode("Delete"); 
    deleteBtn.appendChild(textBtn); 
    h3.id = "deleted"; //this will not be unique this way. :(
} 

    deleteBtn.onclick = function(){ 
     removeBurrito(); 
    } 

    function removeBurrito(){h3.parentNode.removeChild(h3); } 

這個偉大的工程，如果我只添加一個項目，然後將其刪除。但如果我添加2個項目到我的購物車，第二個項目將拋出一個空錯誤：TypeError：h3.parentNode爲空

我想我必須創建一個循環或數組動態個人ID，但不知道如何。

Answer 1

我建議你使用jQuery。

一個解決問題的方法可能是這樣的：

添加

deleteBtn.onclick = function(){ 
    removeBurrito(this); 
} 

到addingToCart功能。

更新removeBurrito功能爲以下之一：

function removeBurrito(element) { 
    element.parentElement.remove(); 
}