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

Question

我制作了一个简单的待办事项列表，到目前为止它有 2 个功能。勾选一个项目并从列表中删除一个项目。

如果我从列表底部开始删除，我可以删除所有项目，但是当我从顶部删除时，第一个项目被删除，第二个项目(现在是第一个)，删除它之后的项目然后没有'当我点击 X 时 t 自行删除

我认为 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>

/**
 * This strikes through list item on click once and item is marked as done
 */
const listItem = document.getElementsByTagName('li')

for (let i = 0; i < listItem.length; i++) {
  listItem[i].addEventListener('click', () => {
    listItem[i].classList.toggle('checked')
  })
}

/**
 * This deletes an item from the list on click
 */
const deleteItem = document.getElementsByTagName('span')

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

https://jsfiddle.net/k2u8mqes/

预期的结果是我应该能够以任何顺序删除每个项目

Answer 1

您的 for 循环将一些点击分配给与您预期不同的元素。

此建议使用click 事件的目标来实时决定需要删除的内容。 (具体来说，它删除了 li，它是被点击的 span 的父级。)

document.addEventListener("click", checkLi);
document.addEventListener("click", deleteSpanParent);

function checkLi(event){
  if(event.target.tagName == "LI"){
    event.target.classList.toggle("checked");
    event.target.style.color = "grey";
  }
}

function deleteSpanParent(event){
  if(event.target.tagName == "SPAN"){
    let span = event.target, li = span.parentNode, ul = li.parentNode;
    ul.removeChild(li);
  }
}

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