Javascript 使用DOM从列表中删除项目

我是网络开发新手。我正在学习JS，在玩一些代码的同时，我只使用DOM制作了一个简单的待办应用程序

我在从列表中删除项目时遇到了逻辑错误。我正在遍历DOM并使用以下方法：；parentNode，删除child以执行此操作。我之前使用n:last-child选择器测试了从列表中删除最后一项的另一种方法，但似乎找不到单独删除一项的方法

HTML:

我知道这看起来很糟糕，但我只是想提高我的dom技能，并找到实现删除按钮功能的方法。有什么建议吗

迭代所有按钮

添加事件侦听器

向上遍历列表容器，并在单击时删除相应的子容器

var deletes=document.querySelectorAll（'.removeBtn'）
//迭代所有节点
删除.forEach（btn=>{
//附加事件侦听器。注意保留此引用的按钮
//通过使用非速记功能
btn.addEventListener（'click'，function（）{
var li=this.parentNode
李,删除()
})
})

oneDelete
两个删除

注释中有解释：

const listDiv = document.querySelector('.listDiv'),
  hideBtn = document.querySelector('#hideBtn'),
  addItemBtn = document.querySelector('button.addItemBtn'),
  addItemInput = document.querySelector('input.addItemInput'),
  //it is a NodeList
  removeToDos = document.querySelectorAll('.removeBtn'),  
  //list of items, 
  ul = document.querySelector('ul');


//because we have NodeList we have iterate over its values
removeToDos.forEach(function(removeTodo){
    //add event listener on each dom element
    removeTodo.addEventListener("click", function(){
    console.log(removeTodo.parentNode.parentNode);
    //get a reference to li closest to the button clicked
    const li =  removeTodo.parentNode.parentNode;
    //remove child by: parent.removeChild(child); syntax
    ul.removeChild(li);
  });
});

还可以通过添加结束跨距标记来修复HTML中的最后一个li：

<li>plums<span><button class="removeBtn">Remove</button></span></li>

plumsRemove

既然您计划将项目添加到列表中，我建议您使用事件委派。朴素的实现应该适用于您的结构

const removeToDo=document.queryselectoral（'.removeBtn'），
列表=document.querySelector（'ul'）；
//查找最近的el，包括与选择器匹配的el本身
常数最近=（el，选择器）=>{
while（el&&！el.matches（选择器））{
el=el.parentNode
}
返回el
}
//将事件侦听器添加到列表本身一次
list.addEventListener（'click'，（{target}）=>{
if（target.matches（'.removeBtn'））{
最近（目标为'li'）。删除（）
}
})

图形删除
紫水晶
薰衣草
李子

查询选择器all返回

节点列表

。它没有

addEventListener

您需要循环它，并将click Listener添加到每个按钮或使用事件委派，因为您正在添加更多行。非常感谢Bakhtiar！只是好奇为什么要使用parentNode两次？这是因为我们选择了btn，btn父节点是它的“li”，而第二个父节点选择了“li”，并将其跟踪到它的“ul”？因为我们从按钮元素开始，然后先上到跨度元素，然后再上到li元素，这是我们计划删除的元素。这就是为什么我们要使用它两次。如果有帮助，请将此标记为答案。太好了！谢谢你的帮助！

const listDiv = document.querySelector('.listDiv'),
  hideBtn = document.querySelector('#hideBtn'),
  addItemBtn = document.querySelector('button.addItemBtn'),
  addItemInput = document.querySelector('input.addItemInput'),
  //it is a NodeList
  removeToDos = document.querySelectorAll('.removeBtn'),  
  //list of items, 
  ul = document.querySelector('ul');


//because we have NodeList we have iterate over its values
removeToDos.forEach(function(removeTodo){
    //add event listener on each dom element
    removeTodo.addEventListener("click", function(){
    console.log(removeTodo.parentNode.parentNode);
    //get a reference to li closest to the button clicked
    const li =  removeTodo.parentNode.parentNode;
    //remove child by: parent.removeChild(child); syntax
    ul.removeChild(li);
  });
});

<li>plums<span><button class="removeBtn">Remove</button></span></li>