Javascript 无法从待办事项列表中删除最后一项

我制作了一个简单的待办事项列表，到目前为止它有两个函数。签出项目并从列表中删除项目

如果我从列表底部开始删除，我可以删除所有项目，但是当我从顶部删除时，第一个项目被删除，第二个项目（现在是第一个）删除它后面的项目，然后在我单击X时不删除它自己

我以为一个

stopPropagration（）

会有帮助，但似乎没有。它只会停止运行另一个选中的函数

<ul>
  <li><span>X</span> Code something</li>
  <li><span>X</span> Wake up early</li>
  <li><span>X</span> Buy popcorn</li>
</ul>

X代码
早起
买爆米花

/**
*单击一次，此操作将遍历列表项，并将该项标记为“完成”
*/
const listItem=document.getElementsByTagName（'li'）
for（设i=0；i{
listItem[i].classList.toggle（'选中'）
})
}
/**
*这将在单击时从列表中删除项目
*/
const deleteItem=document.getElementsByTagName（'span'）
for（设i=0；i{
deleteItem[i].parentNode.remove（）
e、 停止传播（）
})
}

---

预期的结果是，我应该能够以任何顺序删除每个项。问题是，在哪里使用for循环绑定事件侦听器，以及如何使用for循环访问事件绑定到的特定元素

而不是这样做

listItem[i].classList.toggle('checked')
//and
deleteItem[i].parentNode.remove()

您可以使用事件侦听器的事件对象访问绑定元素，如下所示

e.target.classList.toggle('checked')
//and
e.target.parentNode.remove()

请参阅此处的事件侦听器API：

---

检查此提琴以了解代码的工作示例：

您在迭代数组时正在修改数组，这是一个常见的警告。 从顶部删除时：

删除第一个项目，调用

deleteItem[0].parentNode.remove（）

，删除

deleteItem

数组的第一个元素，可以

删除第二个项目，调用

deleteItem[1].parentNode.remove（）

，但是

deleteItem

现在的大小为2，您实际上是在删除 原始阵列的第三个元素

删除第三个项目，调用

deleteItem[2].parentNode.remove（）

，但

deleteItem

现在大小为1，索引已用完 工作代码段：

for (let i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener('click', e => {
    e.target.parentNode.remove()
  })
}

for（设i=0；i{
e、 target.parentNode.remove（）
})
}

您的

for

循环正在将一些单击指定给您想要的不同元素

此建议使用

单击

事件的目标来决定需要实时删除的内容。（具体地说，它将删除作为所单击的

span

的父级的

li

）

document.addEventListener（“单击”，复选框）；
文档。添加的EventListener（“单击”，删除父项）；
功能检查（事件）{
如果（event.target.tagName==“LI”）{
event.target.classList.toggle（“选中”）；
event.target.style.color=“灰色”；
}
}
函数deleteSpanParent（事件）{
如果（event.target.tagName==“SPAN”）{
设span=event.target，li=span.parentNode，ul=li.parentNode；
ul.removeChild（李）；
}
}

X代码
早起
买爆米花

此[链接]解释了您的错误所在。

for (let i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener('click', e => {
    e.target.parentNode.remove()
  })
}