How do I remove a specific div out of many using one function in JavaScript?

Question

I'm learning JavaScript and this is a practice scenario for me.

What I have already is a button that clones content, and within that content that has been cloned, there is a button to remove it.

When I click the button that prompts you to remove the content, it removes the first set of content.

What I want to happen is when you click the button that prompts you to remove the content, it removes the content related to that button and nothing else.

This is the CodePen link.

https://codepen.io/JosephChunta/pen/YzwwgvQ

Here is the code.

 function addContent() { var itm = document.getElementById("newContent"); var cln = itm.cloneNode(true); document.getElementById("placeToStoreContent").appendChild(cln); } function removeContent() { var x = document.getElementById("content").parentNode.remove(); } // This is for debug purposes to see which content is which document.getElementById('orderContent').addEventListener('click', function(e) { const orderedNumber = document.querySelectorAll('.thisIsContent'); let i = 1; for (p of orderedNumber) { p.innerText = '' + (i++); } });

 .contentThatShouldBeHidden { display: none; }

 <div id="placeToStoreContent"> </div> <button id="orderContent" onclick="addContent()">Add Content</button> <div class="contentThatShouldBeHidden"> <div id="newContent"> <div id="content"> <p class="thisIsContent">This is a prompt</p> <button onclick="removeContent()">Remove this</button> <hr /> </div> </div> </div>

Answer 1

When you'r trying to remove by ID, it takes the first ID it finds.

To remove the correct content, send this onclick.

  <button onclick="removeContent(this)">Remove this</button>

And handle it in your function:

function removeContent(el) {
  el.parentNode.remove();
}

Example:

 function addContent() { var itm = document.getElementById("newContent"); var cln = itm.cloneNode(true); document.getElementById("placeToStoreContent").appendChild(cln); } function removeContent(el) { el.parentNode.remove(); } // This is for debug purposes to see which content is which document.getElementById('orderContent').addEventListener('click', function(e) { const orderedNumber = document.querySelectorAll('.thisIsContent'); let i = 1; for (p of orderedNumber) { p.innerText = '' + (i++); } });

 .contentThatShouldBeHidden { display: none; }

 <div id="placeToStoreContent"> </div> <button id="orderContent" onclick="addContent()">Add Content</button> <div class="contentThatShouldBeHidden"> <div id="newContent"> <div id="content"> <p class="thisIsContent">This is a prompt</p> <button onclick="removeContent(this)">Remove this</button> <hr /> </div> </div> </div>

Answer 2

In your remove button, do this:

<!-- The "this" keyword is a reference to the button element itself -->
<button onclick="removeContent(this)">Remove this</button>

And in your javascript:

function removeContent(element) {
  element.parentNode.remove();
}