使用JS开发待办列表时，添加重复元素的异常问题求助

问题原因 #

你当前的重复检测逻辑失效，核心原因是每个任务li元素最后都添加了带×符号的span删除按钮，导致li.textContent实际包含「任务内容×」的完整文本。而你输入的任务内容是「任务内容」，两者对比不相等，所以检测不到重复。

修复方案 #

方案1：快速适配现有代码 #

直接获取li内的纯任务文本节点内容（即li的第一个子节点），跳过删除按钮的内容：

const inputBox = document.getElementById("input-box");
const btn = document.querySelector(".btn");
const toDoList = document.getElementById("list-container");

function checkTask(task) {
    const listElements = toDoList.getElementsByTagName("li");
    for (let i = 0; i < listElements.length; i++) {
        // 提取li内的纯任务文本，排除删除按钮的内容
        const existingTask = listElements[i].firstChild.textContent.trim();
        if (existingTask === task) {
            return true; // 任务已存在
        }
    }
    return false; // 任务不存在
}

function addTask() {
    const inputBoxValue = inputBox.value.trim();
    
    if (inputBoxValue === "") {
        alert("请输入任务内容");
        return;
    }

    if (checkTask(inputBoxValue)) {
        alert("该任务已存在");
        inputBox.value = "";
        return; // 阻止添加重复任务
    }

    const li = document.createElement("li");
    li.textContent = inputBoxValue;
    toDoList.appendChild(li);
    inputBox.value = "";

    let span = document.createElement("span");
    span.innerHTML = "\u00d7"; // 删除按钮符号
    li.appendChild(span);
}

btn.addEventListener("click", addTask);

方案2：结构化任务节点（推荐） #

给任务文本单独添加一个容器元素，DOM结构更清晰，后续维护扩展更方便：

const inputBox = document.getElementById("input-box");
const btn = document.querySelector(".btn");
const toDoList = document.getElementById("list-container");

function checkTask(task) {
    const listElements = toDoList.getElementsByTagName("li");
    for (let i = 0; i < listElements.length; i++) {
        // 获取专门存放任务文本的span内容
        const existingTask = listElements[i].querySelector(".task-content").textContent.trim();
        if (existingTask === task) {
            return true;
        }
    }
    return false;
}

function addTask() {
    const inputBoxValue = inputBox.value.trim();
    
    if (inputBoxValue === "") {
        alert("请输入任务内容");
        return;
    }

    if (checkTask(inputBoxValue)) {
        alert("该任务已存在");
        inputBox.value = "";
        return;
    }

    const li = document.createElement("li");
    // 创建独立的任务文本容器
    const taskContent = document.createElement("span");
    taskContent.className = "task-content";
    taskContent.textContent = inputBoxValue;
    li.appendChild(taskContent);

    const deleteBtn = document.createElement("span");
    deleteBtn.innerHTML = "\u00d7";
    li.appendChild(deleteBtn);

    toDoList.appendChild(li);
    inputBox.value = "";
}

btn.addEventListener("click", addTask);

方案对比 #

• 方案1：改动极小，适合快速修复现有代码，无需调整DOM结构
• 方案2：DOM结构分层清晰，后续如果需要对任务文本做样式修改或交互逻辑，会更易维护

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