本文讲解如何修复待办事项列表中因删除按钮（×）干扰导致的重复校验失效问题，通过精准提取任务文本内容实现可靠去重。
本文讲解如何修复待办事项列表中因删除按钮（×）干扰导致的重复校验失效问题，通过精准提取任务文本内容实现可靠去重。
在构建基于原生 JavaScript 的待办事项（To-Do List）应用时，一个常见却容易被忽视的问题是：任务去重逻辑失效。表面看代码逻辑完整——先检查输入是否为空，再遍历现有
例如，当列表中已存在任务 "Buy milk"，其对应
<li>Buy milk<span>×</span></li>
此时 li.textContent 返回 "Buy milk×"（注意末尾无空格），而用户输入的 inputBoxValue 是 "Buy milk"。二者自然不等，checkTask() 错误返回 false，导致重复添加。
✅ 正确解法是：在校验前，从 textContent 中剥离删除符号 ×。最直接的方式是在比较前调用 .replace("×", "")：
立即学习“Java免费学习笔记（深入）”；
function checkTask(task) {
const listElements = toDoList.getElementsByTagName("li");
for (let i = 0; i < listElements.length; i++) {
// 关键修复：移除 × 符号后再比对
const cleanText = listElements[i].textContent.trim().replace("×", "");
if (cleanText === task) {
return true;
}
}
return false;
}⚠️ 注意事项：
- replace("×", "") 仅替换第一个匹配项；若未来支持多符号或更复杂结构，建议改用正则 /[×\u00d7]/g 全局清除；
- 更健壮的设计是将任务文本与操作控件物理分离：例如用 包裹纯文本，× 独立存在，校验时只读取 .task-text.textContent，从根本上避免干扰；
- 当前方案依赖符号字面量，若 CSS 使用伪元素（如 ::after）渲染 ×，则 textContent 不包含它——此时无需 replace，但需确保样式层不破坏语义结构。
最终，配合清晰的用户反馈（如 alert("Task already exists")）和输入清空逻辑，即可实现稳定、无冗余的待办添加体验。记住：DOM 文本校验必须反映“用户感知的内容”，而非“原始 HTML 结构内容”。
