如何实现JavaScript删除对应列表项？当前按钮误删首个li元素

你的问题出在两个核心点：

• 所有新增的<div>、<button>、<li>都重复使用了相同的ID（比如newDiv、listItem），但DOM中ID必须唯一，调用getElementById时只会返回第一个匹配的元素，导致删除操作总是选中第一个列表项。
• 没有正确关联Delete按钮与对应列表项的容器，无法精准定位要删除的目标元素。

修复步骤 #

1. 移除重复的ID设置：不需要给每个新增元素设置重复ID，直接通过DOM节点的父子关系定位即可。
2. 实现精准删除逻辑：在删除函数中，通过this获取当前点击的Delete按钮，找到它的父容器（包裹列表项和按钮的<div>），直接删除该容器。

修正后的完整代码 #

JavaScript

const unorderedList = document.getElementById("unorderedList");
const input = document.getElementById("item");

function removeItem() {
    // 获取当前按钮的父容器，直接删除整个列表项模块
    this.parentElement.remove();
}

document.getElementById('addButton').onclick = function () {
    const userInput = input.value.trim();
    if (!userInput) return; // 过滤空输入

    let newDiv = document.createElement("div");
    newDiv.className = "newDiv";

    let newButton = document.createElement("button");
    newButton.innerText = "Delete";
    newButton.className = "newButton";
    newButton.onclick = removeItem;

    const newListItem = document.createElement("li");
    newListItem.innerText = userInput;
    newListItem.className = "listItem";

    newDiv.appendChild(newListItem);
    newDiv.appendChild(newButton);
    unorderedList.appendChild(newDiv);

    // 清空输入框，提升用户体验
    input.value = "";
};

CSS

li {
    margin-bottom: 10px;
}

.newButton {
    font-size: 12px;
    margin-left: 20px;
    color: #666;
}

HTML

<h1>My shopping list</h1>

<div>
    <label for="item">Enter a new item:</label>
    <input type="text" name="item" id="item">
    <button id="addButton">Add item</button>
</div>

<ul id="unorderedList"></ul>

额外优化说明 #

• 增加空输入过滤，避免添加无效的空列表项
• 新增输入框清空逻辑，简化用户后续操作
• 调整CSS选择器为类选择器，定位更精准

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