DOM: 在 onclick 事件中用新创建的删除按钮删除新创建的 'article' 元素？

Question

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

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

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

的内容

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

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

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

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

等等

Answer 2

如果您不想使用 jQuery，您可以将事件侦听器添加到您的按钮：

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

https://jsfiddle.net/3nq1v5e1/

DOM: 在 onclick 事件中用新创建的删除按钮删除新创建的 'article' 元素？

DOM: Delete newly created 'article' element with newly created delete button within onclick event?

html

javascript

dom

button

sections