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

下面是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);
    }
})

项目1点击
项目2点击
项目3点击
项目4点击
项目5点击

下面是JS代码
var ul=文件查询选择器（“ul”）；
var li=document.querySelector（“li”）；
var按钮=document.queryselectoral（“.btn”）；
按钮。forEach（功能（i）{
i、 onclick=function（）{
ul.removeChild（李）；
}
})

---

上面的代码只删除第一项。我真的不知道如何实现这一点。html集合和节点列表概念非常混乱。

在处理程序中，选择按钮的

parentElement

和

remove（）


var-button=document.querySelectorAll（“.btn”）；
按钮。forEach（功能（按钮）{
button.onclick=函数（）{
button.parentElement.remove（）；
}
})

项目1点击
项目2点击
项目3点击
项目4点击
项目5点击
您可以获取按钮并向其添加事件，在
上单击
它将找到其父项并将其删除


document.queryselectoral（“.btn”）.forEach（函数（i）{
i、 addEventListener（'单击'，函数（））{
this.parentNode.remove（）
})
})

项目1点击
项目2点击
项目3点击
项目4点击
项目5点击
仅删除下一个元素。与一起使用

或

否则使用相同的元素删除使用


var ul=document.querySelector（“ul”）；
var li=document.querySelector（“li”）；
var按钮=document.queryselectoral（“.btn”）；
按钮。forEach（功能（i）{
i、 addEventListener（'单击'，函数（））{
this.parentElement.nextElementSibling.remove（）；
})
})

项目1点击
项目2点击
项目3点击
项目4点击
项目5点击
谢谢，我不知道有任何删除方法可用。我得到的只是removeChild方法。你有没有任何参考资料，这样我可以进一步阅读它的内容，这样我们就可以选择父元素并直接使用remove方法？代码对我来说很好，这个方法是新的吗，因为w3c中没有只删除子节点的示例。你可以查看MDN页面，看看它有多受支持-它很旧，但它在（古代）IE上不受支持。但这正是PolyFill的用途。（您可以在链接页面上看到一个多边形填充。）或者，您可以选择父对象，然后使用
removeChild
，如果需要，由您决定