使用其中的按钮删除 dom 元素，香草 JS

Question

我对此很陌生，并且一直在寻找一种方法来使用分配的 eventListener 制作“删除”按钮以删除与它相关的元素 （li）。

我还不太了解JS，所以这可能不是最好的方法，但这就是我目前所拥有的：

一个简单的网页

<h1>The List</h1>

<ul>

  <li>Delete me<button id="del">x</button></li>

  <li>Delete me too<button id="del">x</button></li>

</ul>

我想让每个“del”按钮删除其父级 - 此按钮嵌套的“li”。.我想写一个可重用的函数。

我可以得到一个想法，我需要“制作点击功能来删除父（ul）的子（li）”。如何将特定的“li”与嵌套在其中的“按钮”连接起来？

我也在想也许可以循环给它一个唯一的 id 或一个数字。我在这里有点迷茫，你能告诉我可以做什么吗，考虑到我真的很新，还不能做任何框架，只是想能够在 JS 中做到这一点。

我这样做是为了尝试，但这太具体了，最终它需要在不知道顺序的情况下对其中任何一个重复使用：

const parent = document.getElementsByTagName('ul')[0];

const child = parent.getElementsByTagName('li')[0];

const del = document.getElementById('del');

function removeMe() {

  parent.removeChild(child);

}

del.addEventListener('click', removeMe);

谢谢！

Answer 1

因为您希望在多个按钮上添加相同的逻辑，所以应该使用 而不是 。该 ID 应该是唯一的。使用 Element.closest（），您可以找到最接近单击发生的父节点，直到找到与提供的选择器字符串匹配的节点。在此处阅读代码示例中的注释classesids // deleteButtons is will be an array of buttonsconst deleteButtons = document.querySelectorAll('.del');deleteButtons.forEach( button => {  // add the event listener to each button  button.addEventListener('click', removeMe); });function removeMe() {   // this is the button   // from the button you want to move up in DOM    // and find the closes <li> to remove   this.closest('li').remove(); }<h1>The List</h1><ul>  <li>Delete me<button class="del">x</button></li>  <li>Delete me too<button class="del">x</button></li></ul>

Answer 2

正如其他人所说，元素 ID 在文档中应该是唯一的。使用事件委派并使用数据属性来识别应激活删除的按钮。document.addEventListener('click', evt => {  const origin = evt.target;  if (+origin.dataset.deleteparent) {    origin.closest("li").remove();  }});/*   --explained--  const origin = evt.target;                 ^ where did the click originated?  if (+origin.dataset.deleteparent)      ^       ^ only if the button contains data-deleteparent attribute      ^ convert data-attribute value to Number.         If it's not there, or 0, nothing will happen    origin.closest("li").remove();           ^ parent li   ^                         ^ remove it  }*/button[data-deleteparent] { color: red; border: none; background-color: transparent; cursor: pointer}<h1>The List</h1><ul>  <li>Delete me <button data-deleteparent="1">&#x2718;</button></li>  <li>Delete me too <button data-deleteparent="1">&#x2718;</button></li>  <li>Delete me not <button>Do not delete</button></li></ul>

Answer 3

只需使用 DOM 节点的属性。 另外，如上所述 - 在你的情况下，你应该使用 es 而不是 id，因为必须是唯一的。parentElementclassidconst buttons = document.querySelectorAll('.rm-button');function rmParent() {&nbsp; &nbsp;this.parentElement.remove();}buttons.forEach(button => {&nbsp; button.addEventListener('click', rmParent);});<h1>The List</h1><ul>&nbsp; <li>Delete me<button class="rm-button">x</button></li>&nbsp; <li>Delete me too<button class="rm-button">x</button></li></ul>