DOM：在 onclick 事件中使用新创建的删除按钮删除新创建的“文章”元素？

Question

我有一个 section 元素，其中包含一个 article 元素。另外，我有一个带有 'onclick' 事件的输入按钮。每当触发此事件时，都会有一个新的文章元素附加到具有 unique id 的 section 元素。 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);
}

现在我想要的是每当用户单击新创建的附加删除按钮时，只有该特定文章被删除而不影响其余文章。

这是my jsFiddle 代码。

Answer 1

如果你不想使用 jQuery，你可以在你的按钮上添加事件监听器：

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

https://jsfiddle.net/3nq1v5e1/

Answer 2

您需要在新创建的删除按钮上绑定一个事件监听器。您关于使用 $(this) 的示例代码表明您正在使用 JQuery，但在其余代码中您没有使用任何 JQuery？

如果您使用的是 JQuery，事情变得非常简单，只需添加类似的内容

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

（记得给删除按钮一个 CLASS 而不是 ID，因为会有多个删除按钮）。

如果您不使用 JQuery，则需要在每次创建新的删除按钮时添加事件侦听器

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

等等