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

Question

我对此很陌生，一直在寻找一种方法来制作一个带有分配的 eventListener 的 'delete' 按钮，以删除它与 (li) 相关的元素。

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

一个简单的HTML

<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' 与嵌套在其中的 'button' 连接起来？

我也在想也许可以循环给它一个唯一的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

因为您想在多个按钮上添加相同的逻辑，所以您应该使用 classes 而不是 ids。 ID 应该是唯一的。使用 Element.closest() 您可以从发生点击的位置找到最近的父级，直到找到与提供的选择器字符串匹配的节点。在此处阅读代码示例中的注释

const deleteButtons = document.querySelectorAll('.del'); // will give you an array of buttons

deleteButtons.forEach( button => {
  button.addEventListener('click', removeMe); // add the event listener to each button
});

function removeMe() {
   this.closest('li').remove(); // this is the button, from there you want to move up in DOM and find the closes <li> to 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 should be unique in the document。

使用 event delegation and use a data-attribute 识别应激活删除的按钮。

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 节点的 parentElement 属性。此外，如上所述 - 在您的情况下，您应该使用 classes 而不是 id，因为 id 必须是唯一的。

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>

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

Delete a dom element using a button within it, vanilla JS

javascript

dom

button

event-listener

removechild