JavaScript待办列表点击X删除对应li元素功能失效问题

问题根源 #

你的代码存在3个核心错误，导致单条删除功能无法正常运行：

• 重复ID冲突：HTML规范要求页面内id属性全局唯一，你每新增一个li和删除按钮都用了相同的item、clearOne id，浏览器只会识别第一个匹配的元素，后续新增项的按钮根本绑定不上事件
• 事件绑定时机错误：你把删除单条、清空全量的事件绑定写在了提交按钮的点击回调里，意味着第一次点提交之前这些按钮根本没有绑定事件，而且每点一次提交就会重复绑定一次事件，造成逻辑混乱
• 删除逻辑错误：removeChild()方法需要传入要删除的子节点参数，你没传参，而且就算传参也因为id重复的问题删不到对应项

修正后的完整代码 #

HTML部分（无需改动，保持原结构即可） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>

<script src="todojs.js"></script>
</body>
</html>

JavaScript修正版 #

// 清空列表事件提前绑定，页面加载后只绑定一次
document.getElementById('clearList').onclick = function() {
    const ul = document.getElementById('list');
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
}

// 提交新增待办事件
document.getElementById('myButton').onclick = function () {
    const inputEle = document.getElementById('toDo');
    const doIt = inputEle.value.trim();
    // 空内容不新增
    if (!doIt) return;

    // 创建li元素，不使用重复id
    const li = document.createElement('li');
    li.textContent = doIt;
    // 创建单条删除按钮
    const delBtn = document.createElement('button');
    delBtn.type = 'button';
    delBtn.textContent = 'X';
    // 给当前按钮绑定删除事件，点击时直接删除对应的父级li
    delBtn.onclick = function() {
        li.remove();
    }
    // 把按钮塞入li，再把li塞入待办列表
    li.appendChild(delBtn);
    document.getElementById('list').appendChild(li);
    // 新增完成后清空输入框
    inputEle.value = '';
}

实现说明 #

• 所有固定存在的按钮（提交、清空全量）的事件都在页面加载完成后直接绑定，不需要放到其他回调里重复绑定
• 新增待办时通过原生DOM API创建元素，不再拼接HTML字符串，从根源避免id重复问题
• 每个删除按钮在创建时就绑定自己的删除逻辑，点击时直接移除自身所属的li元素，不需要通过id查找元素，不会出现找错节点的问题
• 增加了空内容校验，避免用户提交空的待办项

替换原有JS代码即可直接运行，点击任意待办后的X按钮会删除对应条目，点击Clear List会清空全部待办。

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