DOM：在onclick事件中刪除新創建的“article”元素並使用新創建的刪除按鈕？

Question

我有一個包含一個文章元素的section元素。 另外，我有一個帶有'onclick'事件的輸入按鈕。 每當此事件觸發時，都會在具有唯一ID的section元素后附加一個新的article元素。 newArticle元素包含標簽，文本框和刪除按鈕。 所有這三個元素都在點擊事件中創建。

document.getElementById("addRow").onclick = function () {

    var newCustomerlbl = document.createElement("label");
    newCustomerlbl.innerHTML = "Cutomer Name: ";
    var newCustomertxt = document.createElement("input");
    newCustomertxt.setAttribute("type", "text");

    var delBtn = document.createElement("input");
    delBtn.setAttribute("type", "button");
    delBtn.setAttribute("value", "Delete");
    delBtn.setAttribute("id", "btnDelete");

    var newArticle = document.createElement("article");
    newArticle.appendChild(newCustomerlbl);
    newArticle.appendChild(newCustomertxt);
    newArticle.appendChild(delBtn);

    var customerSection = document.getElementById("customerRecords");

    var customerArticles = customerSection.getElementsByTagName("article");

    for (var i = 0; i < customerArticles.length; i++) {

        var lastDigit = i + 1;

        var newArticleValue = "article" + lastDigit;
        newArticle.setAttribute("id", newArticleValue);
    }

    customerSection.appendChild(newArticle);
}

現在我想要的是每當用戶點擊新創建的附加刪除按鈕時，只刪除該特定文章而不影響其余文章。

這是我的jsFiddle代碼。

Answer 1

您需要在新創建的刪除按鈕上綁定事件偵聽器。 你使用$(this)示例代碼表明你正在使用JQuery，但是在你沒有使用任何JQuery的其余代碼中再次使用它？

如果您正在使用JQuery，事情變得非常簡單，只需添加類似的東西

$(document).on('click','.btnDelete', function(){
   $(this).closest('article').remove();
});

（並且記得給deletebutton一個CLASS而不是ID，因為會有多個刪除按鈕）。

如果您不使用JQuery，則需要在每次創建新的刪除按鈕時添加事件偵聽器

newArticle.appendChild(delBtn);
delBtn.onclick = function(.....

等等

Answer 2

如果您不想使用jQuery，可以向按鈕添加事件偵聽器：

delBtn.addEventListener('click', function () {
    this.parentElement.remove();
}, false);

https://jsfiddle.net/3nq1v5e1/