点击Remove按钮无法删除待办项问题求助（JavaScript）

你的代码存在两个核心问题导致删除按钮失效，下面是具体修正方案：

问题1：innerHTML赋值破坏已绑定的事件监听 #

你先通过appendChild添加了remove按钮，紧接着用list.innerHTML += ...修改列表HTML内容。这个操作会销毁列表内所有原有元素（包括刚添加的按钮）并重新创建新元素，导致之前给按钮绑定的click事件监听完全丢失。

问题2：删除逻辑的DOM层级错误 #

当前按钮和<li>是同级结构，且removeItem里直接使用event.parentElement是错误的——event是事件对象，需通过event.target获取触发事件的按钮元素，再定位到对应的待办项容器。

修正后的完整代码 #

function handleSubmit(event){
    event.preventDefault();
    let value = getInputValue();
    if(value !== false){
        addToDom(value);
        eraseInput();
    }
}

const form = document.querySelector("#todo-list-form");
form.addEventListener('submit', handleSubmit);

function getInputValue() {
    const input = document.querySelector("#todo-input");
    let value = input.value.trim();
    if (value === '') {
        alert("You can not submit an empty field");
        return false;
    } else {
        return value;
    }
}

function addToDom(value) {
    const list = document.querySelector("#list");
    // 创建容器包裹按钮和待办项文本
    const todoItem = document.createElement("div");
    todoItem.classList.add("todo-item");

    const removeButton = document.createElement("button");
    removeButton.textContent = 'remove';
    removeButton.classList.add("complete-btn");
    removeButton.addEventListener('click', removeItem);

    const todoText = document.createElement("li");
    todoText.textContent = value;

    todoItem.appendChild(removeButton);
    todoItem.appendChild(todoText);
    list.appendChild(todoItem);
}

function removeItem(event){
    // 通过按钮定位到父容器并删除整个待办项
    event.target.parentElement.remove();
}

function eraseInput() {
    const input = document.querySelector("#todo-input");
    input.value = "";
    input.focus();
}

关键改动说明 #

1. 全程使用createElement创建元素，避免innerHTML +=操作破坏现有DOM结构和事件监听
2. 给每个待办项添加父容器，让按钮和文本属于同一层级，删除时可直接移除整个待办项容器
3. removeItem函数中通过event.target获取点击的按钮，再通过parentElement定位到待办项容器完成删除

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