如何用JavaScript从UL中移除选中的LI？现有代码误删全部LI

你的代码存在两个核心问题，导致点击按钮后删除所有任务项：

1. deleteCheckedItem函数中使用的li是addTask的局部变量，无法正确匹配每个勾选框对应的父元素；同时getElementsByName返回动态HTML集合，正向循环删除元素时，集合长度会实时变化，导致索引错乱，最终误删所有元素。
2. 每次调用addTask都会给删除按钮重复绑定click事件，放大了错误的影响范围。

1. 调整事件绑定逻辑 #

把删除按钮的事件监听移到addTask函数外部，仅绑定一次，避免重复触发：

document.addEventListener('DOMContentLoaded', function() {
  const delBtn = document.querySelector("#delchecked");
  delBtn.addEventListener("click", deleteCheckedItem);
});

2. 修复删除函数逻辑 #

采用倒序循环遍历勾选框（避免动态集合索引错乱），并通过勾选框找到对应的父元素li进行删除：

function deleteCheckedItem(){
  const checkboxes = document.getElementsByName('chk');
  // 倒序循环，防止删除元素后集合长度变化导致索引跳过
  for(let i = checkboxes.length - 1; i >= 0; i--){  
    const checkbox = checkboxes[i];
    if(checkbox.checked){
      // 获取当前勾选框的父元素li并删除
      checkbox.parentElement.remove();
    }
  } 
}

3. 移除重复的事件绑定代码 #

删除addTask函数中这段重复绑定事件的代码：

const delchecked=document.querySelector("#delchecked");
delchecked.addEventListener("click",deleteCheckedItem);

完整修正后的代码 #

<div class="container mt-5">
  <ul class="list-group" id="tasks"> </ul>

  <div class="col">
    <button type="button" class="btn btn-primary" id="delchecked">Delete done tasks</button>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const delBtn = document.querySelector("#delchecked");
  delBtn.addEventListener("click", deleteCheckedItem);
});

function addTask() {
  const li = document.createElement("li");
  li.className = "list-group-item";
  tasks.appendChild(li);

  const checkBox = document.createElement("input")
  checkBox.className = "form-check-input me-1 fa-pull-right"
  checkBox.type = "checkbox"
  checkBox.name = "chk"
  li.appendChild(checkBox);
  // 注意：id必须唯一，这里不要给所有勾选框设置相同id，可改为动态生成或直接移除
  // checkBox.id = "checkBox";
}

function deleteCheckedItem(){
  const checkboxes = document.getElementsByName('chk');
  for(let i = checkboxes.length - 1; i >= 0; i--){  
    const checkbox = checkboxes[i];
    if(checkbox.checked){
      checkbox.parentElement.remove();
    }
  } 
}  
</script>

额外提醒：DOM元素的id必须全局唯一，原代码中每次创建勾选框都设置id="checkBox"不符合规范，建议移除该设置或生成动态唯一id。

内容的提问来源于stack exchange，提问作者Kubilay Kızılhan