Creating and Deleting Created Element Using Javascript

Question

Suppose... I have a Create Button and this Create Button creates Block level Element every time Create Button is clicked ... I mean If you click Create Button 100 times, it will create block Element 100 times. Into that Block element , I have a delete button .

Now what I want, is when that delete button is clicked of its respected Parent element... that Parent element should be removed completely with whatever content into it.

So clicking delete button of that particular parent element , only that particular element should be removed and there should be no disturbance to others. Hope you understand what I am trying to say.

I am actually creating a front end project challenged from Frontend mentor, here is the link https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9

I tried giving ids to them but after the first time either no other elements are removed or all elements get removed. My problem might confuse you so please tell me how to create that mechanism mentioned above.

Answer 1

1. Delegate from container. Here I use id="comments"

2. give a class to button.

3. if the block element contains the button, just do this, assuming the block element is given class="comment"

    document.getElementById("comments").addEventHandler("click", e => { const tgt = e.target.closest("button"); if (tgt && tgt.matches(".delete")) tgt.closest("div.comment").remove(); })