如何使用JavaScript移除Todo App中带有checked类的li元素

问题场景 #

开发Todo App（JS新手），无法移除用户输入生成的、带有checked类的已完成任务（对应li.checked元素），原代码如下：

原HTML代码

<div class="todo-container">
<ul class="todo-list">
<li class="checked">completed task</li>
<li>Uncompleted task</li>
</ul>
</div>
<div class="btn" onclick="deletecompletedTask()"> deleteAll</div>

原JS代码

const btn = document.querySelector(".btn");
const todoContainer = document.querySelector('.todo-container');
const todolist = document.querySelector('.todo-list');

//Delete completed task
function deletecompletedTask(){
todoContainer.innerhtml = document.getElementByClassName('checked');
todoContainer.removeChild(todoContainer.firstChild);
}

错误分析 #

• JS大小写敏感：innerhtml应该写成innerHTML
• 方法名错误：getElementByClassName应为getElementsByClassName（复数Elements），且该方法返回元素集合，不能直接赋值给innerHTML
• 删除逻辑错误：当前代码试图修改容器innerHTML并删除第一个子元素，完全不符合删除所有已完成任务的需求

正确实现 #

修正后的HTML（补全onclick的闭合引号）

<div class="todo-container">
  <ul class="todo-list">
    <li class="checked">completed task</li>
    <li>Uncompleted task</li>
  </ul>
</div>
<div class="btn" onclick="deletecompletedTask()">deleteAll</div>

修正后的JS函数

function deletecompletedTask(){
  // 获取所有带checked类的li元素
  const completedTasks = document.querySelectorAll('.todo-list .checked');
  // 遍历删除每个已完成任务
  completedTasks.forEach(task => {
    task.remove();
  });
}

说明 #

• 使用querySelectorAll获取所有匹配的已完成任务元素，它返回一个NodeList，支持forEach遍历
• 直接调用每个元素的remove()方法即可删除自身，逻辑更清晰且不易出错

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