使用其中的按钮删除 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 buttons

const 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，因为必须是唯一的。parentElementclassid

const buttons = document.querySelectorAll('.rm-button');

function rmParent() {

   this.parentElement.remove();

}

buttons.forEach(button => {

  button.addEventListener('click', rmParent);

});

<h1>The List</h1>

<ul>

  <li>Delete me<button class="rm-button">x</button></li>

  <li>Delete me too<button class="rm-button">x</button></li>

</ul>