使用纯 Java 脚本单击旁边的按钮后如何删除每个项目

Posted 2023-02-25

【中文标题】使用纯 Java 脚本单击旁边的按钮后如何删除每个项目

【英文标题】：How would I remove each Item after clicking the button next to it using plain Java script

【发布时间】：2019-08-01 09:52:26

【问题描述】：

下面是html代码

 <ul>
        <li>Item 1<button class="btn">click</button></li>
        <li>Item 2<button class="btn">click</button></li>
        <li>Item 3<button class="btn">click</button></li>
        <li>Item 4<button class="btn">click</button></li>
        <li>Item 5<button class="btn">click</button></li>
 </ul>

Below is JS code

var ul=document.querySelector("ul");
var li= document.querySelector("li");
var button= document.querySelectorAll(".btn");

button.forEach(function(i)
    i.onclick=function()
        ul.removeChild(li);
    
)

上面的代码只删除了第一项。我真的不知道如何实现这一点。真的对 html 集合和节点列表概念感到困惑。

【参考方案1】：

在处理程序中，选择按钮的parentElement 和remove() it：

var button = document.querySelectorAll(".btn");

button.forEach(function(button) 
  button.onclick = function() 
    button.parentElement.remove();
  
)

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

如果需要，您也可以使用事件委托，而不是添加多个侦听器：

document.querySelector('ul').addEventListener('click', ( target ) => 
  if (target.className === 'btn') 
    target.parentElement.remove();
  
);

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

【讨论】：

谢谢，我不知道有任何删除方法可用。我得到的只是 removeChild 方法。你有没有参考它，所以我可以进一步阅读它

见ChildNode.remove()

所以我们可以直接选择父元素并使用remove方法吗？

代码对我来说很好用，这个方法是不是新的，因为在 w3c 中没有示例，只有删除子节点

您可以查看 MDN 页面以了解它的支持程度——它已经很老了，但（古老的）IE 不支持它。但这就是 polyfill 的用途。 （您可以在链接页面上看到一个 polyfill。）或者，您可以选择父级，然后根据需要使用 removeChild，这取决于您

【参考方案2】：

您可以获取按钮并向其添加事件，以便在click 上找到其父级并将其删除

document.querySelectorAll(".btn").forEach(function(i) 
  i.addEventListener('click', function() 
    this.parentNode.remove()
  )
)

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

【参考方案3】：

只删除下一个元素。与 this.parentElement.nextElementSibling.remove()

或

其他元素相同的删除使用this.parentElement.remove()

var ul = document.querySelector("ul");
var li = document.querySelector("li");
var button = document.querySelectorAll(".btn");

button.forEach(function(i) 
  i.addEventListener('click',function() 
    this.parentElement.nextElementSibling.remove();
  )
)

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>