4

下面是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 集合和节点列表概念感到困惑。

4

3 回答 3

3

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

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>

于 2019-03-11T05:46:20.457 回答
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>

于 2019-03-11T05:48:37.723 回答
2

仅删除下一个元素。与 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>

于 2019-03-11T05:49:14.390 回答