如何在待办事项应用中标记任务完成且不影响删除图标？

1. 修复删除线影响图标的样式问题 #

问题核心是checked类直接加在<li>上，导致内部所有子元素都继承删除线样式。可以通过两种方式解决：

方式一：单独排除删除图标的样式 #

给删除图标添加专属类名（比如delete-icon），然后在CSS中取消它的删除线：

.checked {
  text-decoration: line-through;
}
.checked .delete-icon {
  text-decoration: none;
}

方式二：拆分任务结构（更推荐） #

把任务文本和删除图标分开包裹，让删除线只作用于任务文本：

<li>
  <span class="task-content">你的待办任务内容</span>
  <span class="delete-icon">×</span>
</li>

对应的CSS：

.checked .task-content {
  text-decoration: line-through;
}

2. 优化事件委托逻辑（避免点击任务文本不触发状态切换） #

原代码只判断点击目标是<li>或<span>，但如果点击任务文本（比如上面的.task-content），target.tagName不是<li>，就不会触发状态切换。可以用closest()方法找到最近的<li>元素，确保点击任务区域内的非图标元素都能触发状态切换：

listContainer.addEventListener(
  "click",
  function (delCheck) {
    const targetLi = delCheck.target.closest("li");
    // 点击删除图标时移除任务
    if (delCheck.target.classList.contains("delete-icon")) {
      targetLi.remove();
    } 
    // 点击任务其他区域时切换完成状态
    else if (targetLi) {
      targetLi.classList.toggle("checked");
    }
  },
  false
);

内容的提问来源于stack exchange，提问作者Palazzo