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

Question

I have one section element that contains one article element. Also, I have one input button with 'onclick' event. Whenever this event fired, a new article element appended to the section element with unique id. The newArticle element contains a label, text box and a delete button. All these three elements get created within the on-click event.

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);
}

Now what I want is whenever user click upon the newly created appended delete button, only that particular article get deleted without effecting the rest of articles.

Here is the my jsFiddle code.

Answer 1

If you don't want to use jQuery you can add event listeners to your buttons:

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

https://jsfiddle.net/3nq1v5e1/