如何使用 JavaScript 中的一个 function 从多个 div 中删除特定的 div？

Question

我正在学习 JavaScript，这对我来说是一个练习场景。

我已经有了一个克隆内容的按钮，在已克隆的内容中，有一个按钮可以将其删除。

当我点击提示您删除内容的按钮时，它删除了第一组内容。

我想要发生的是，当您单击提示您删除内容的按钮时，它会删除与该按钮相关的内容，而不会删除其他任何内容。

这是 CodePen 链接。

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

这是代码。

 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

当您尝试按 ID 删除时，它会使用它找到的第一个 ID。

要删除正确的内容，请发送this onclick。

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

并在你的 function 中处理：

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

例子：

 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

在您的删除按钮中，执行以下操作：

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

在您的 javascript 中：

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