Question

我有一个部分元素，其中包含一个文章元素。另外，我有一个带'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);
}

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

以下是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”元素并使用新创建的删除按钮？

2 个答案: