以下是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集合和节点列表概念上真的很困惑。
在处理程序内,选择按钮的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>
您可以获取按钮并添加事件,在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>
仅删除下一个元素。使用 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>