如何在Todo List网页中移除单个待办项而非清空整个列表

你的代码存在几个关键问题，导致无法单独移除待办项，以下是具体修复方案：

原代码核心问题 #

• 所有操作按钮使用重复的id="button"，HTML规范要求id必须唯一，这会导致事件绑定逻辑混乱。
• 点击按钮时未传递待办项的唯一标识（比如索引），无法定位要删除的目标项。
• todoFinished函数中使用了不存在的todoList.pend方法，且todoName不在该函数作用域内，根本无法执行删除逻辑。
• 每个待办项的<li>和操作按钮未放在同一容器中，删除时难以关联对应的DOM元素。

修改后的完整代码 #

const todoList = [];

function addTodo() {
    const inputElement = document.querySelector('.js-input');
    const todoName = inputElement.value.trim();

    if (todoName !== '') {
        todoList.push(todoName);
        renderTodoList(); // 改用统一渲染函数更新列表
        inputElement.value = '';
    }
}

function clearTodo() {
    todoList.length = 0;
    renderTodoList();
}

// 统一渲染待办列表，避免innerHTML拼接的潜在问题
function renderTodoList() {
    const todoListElement = document.querySelector('.js-todo-list');
    let html = '';

    todoList.forEach((todo, index) => {
        // 给每个待办项包裹容器，按钮点击时传递当前索引
        html += `
        <div class="todo-item">
            <li class="js-todo-items">${index + 1}. ${todo}</li>
            <button class="final-button" onclick="finishTodo(${index})">✅</button>
            <button class="final-button" onclick="removeTodo(${index})">🚫</button>
        </div>`;
    });

    todoListElement.innerHTML = html;
}

// 标记待办项完成（可自行添加样式逻辑）
function finishTodo(index) {
    const todoItem = document.querySelectorAll('.todo-item')[index];
    todoItem.style.textDecoration = 'line-through';
}

// 移除单个待办项
function removeTodo(index) {
    // 从数组中删除指定索引的项
    todoList.splice(index, 1);
    // 重新渲染列表更新视图
    renderTodoList();
}

关键修改说明 #

1. 统一渲染逻辑：新增renderTodoList函数，每次数组变化后重新渲染整个列表，避免直接拼接innerHTML带来的逻辑混乱。
2. 传递索引参数：每个操作按钮点击时传入当前待办项的索引，精准定位要操作的目标。
3. DOM结构优化：将每个待办项的内容和按钮放入同一容器，方便后续关联操作DOM元素。
4. 正确的数组操作：使用splice(index, 1)删除数组中指定索引的元素，这是数组删除指定项的标准方法。

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