如何通过JavaScript实现点击删除按钮移除购物列表对应项

问题分析 #

当前代码存在两处核心问题：

1. 点击删除按钮时仅移除了按钮本身，未删除对应的整个列表项（<li>元素）
2. 通过输入框新增的列表项没有添加删除按钮，也未绑定状态切换和删除的事件

修复方案 #

1. 修正删除逻辑

修改remove函数，让它删除按钮的父元素（即包含按钮的<li>）：

function remove(event) {
    // 删除按钮所在的整个列表项
    event.target.parentElement.remove();
}

2. 完善新增列表项的创建逻辑

更新createListElement函数，给新增的列表项自动添加删除按钮，并绑定对应事件：

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    
    // 创建删除按钮并绑定删除事件
    var deleteBtn = document.createElement("button");
    deleteBtn.className = "delete";
    deleteBtn.textContent = "Delete";
    deleteBtn.addEventListener("click", remove);
    
    li.appendChild(deleteBtn);
    // 给新增列表项绑定状态切换事件
    li.addEventListener("click", onOffClick);
    
    ul.appendChild(li);
    input.value = "";
}

3. 可选优化：用事件委托简化代码

可以移除原来的两个循环绑定事件的代码，改用事件委托给<ul>绑定一个点击事件，统一处理所有列表项的状态切换和删除操作，这样不管是原有还是新增的元素都能自动生效：

// 替换原来的两个for循环
ul.addEventListener("click", function(event) {
    const target = event.target;
    // 点击列表项时切换done类
    if (target.tagName === "LI") {
        target.classList.toggle("done");
    }
    // 点击删除按钮时移除对应列表项
    else if (target.classList.contains("delete")) {
        target.parentElement.remove();
    }
});

完整修复后的JavaScript代码 #

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    
    var deleteBtn = document.createElement("button");
    deleteBtn.className = "delete";
    deleteBtn.textContent = "Delete";
    
    li.appendChild(deleteBtn);
    ul.appendChild(li);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

// 事件委托处理所有点击操作
ul.addEventListener("click", function(event) {
    const target = event.target;
    if (target.tagName === "LI") {
        target.classList.toggle("done");
    } else if (target.classList.contains("delete")) {
        target.parentElement.remove();
    }
});

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

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