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

Question

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

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

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

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

这是代码围栏链接。

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&nbsp; <button onclick="removeContent(this)">Remove this</button>并在您的函数中处理它：function removeContent(el) {&nbsp; el.parentNode.remove();}例：function addContent() {&nbsp; var itm = document.getElementById("newContent");&nbsp; var cln = itm.cloneNode(true);&nbsp; document.getElementById("placeToStoreContent").appendChild(cln);}function removeContent(el) {&nbsp; el.parentNode.remove();}// This is for debug purposes to see which content is whichdocument.getElementById('orderContent')&nbsp; &nbsp; &nbsp; &nbsp; .addEventListener('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const orderedNumber = document.querySelectorAll('.thisIsContent');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let i = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (p of orderedNumber) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.innerText = '' + (i++);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });.contentThatShouldBeHidden { display: none; }<div id="placeToStoreContent">&nbsp;&nbsp;</div><button id="orderContent" onclick="addContent()">Add Content</button><div class="contentThatShouldBeHidden">&nbsp; <div id="newContent">&nbsp; &nbsp; <div id="content">&nbsp; &nbsp; &nbsp; <p class="thisIsContent">This is a prompt</p>&nbsp; &nbsp; &nbsp; <button onclick="removeContent(this)">Remove this</button>&nbsp; &nbsp; &nbsp; <hr />&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

在移除按钮中，执行以下操作：<!--&nbsp;The&nbsp;"this"&nbsp;keyword&nbsp;is&nbsp;a&nbsp;reference&nbsp;to&nbsp;the&nbsp;button&nbsp;element&nbsp;itself&nbsp;--> <button&nbsp;onclick="removeContent(this)">Remove&nbsp;this</button>在你的脚本中：function&nbsp;removeContent(element)&nbsp;{ &nbsp;&nbsp;element.parentNode.remove(); }