如何使用 JavaScript 删除具有特定类名的 li 元素-js教程-PHP中文网

如何使用 JavaScript 删除具有特定类名的 li 元素

本文详解如何通过原生 JavaScript 安全、高效地删除 DOM 中所有带有指定类名（如 .checked）的元素，适用于待办清单等动态列表场景，避免误删或 DOM 操作错误。

本文详解如何通过原生 javascript 安全、高效地删除 dom 中所有带有指定类名（如 `.checked`）的 `

` 元素，适用于待办清单等动态列表场景，避免误删或 dom 操作错误。

在开发 Todo 应用时，常需批量清除已标记为完成的任务（例如带有 class="checked" 的

元素）。初学者易误用 innerHTML 赋值或 removeChild() 配合错误选择器，导致页面异常或仅删除首个元素。正确做法是精准定位目标节点并调用 .remove() 方法——该方法直接从 DOM 中移除自身，简洁且兼容性好（支持 IE10+ 及所有现代浏览器）。

✅ 推荐实现方式（推荐使用 querySelectorAll + forEach）

function deleteCompletedTasks() {
  document.querySelectorAll('.checked').forEach(el => el.remove());
}

此代码会：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

查找文档中所有含 class="checked" 的元素（不限于
，但结合你的 HTML 结构，实际匹配的就是待删的
）；
对每个匹配元素调用 .remove()，安全移除，无需关心父节点。

?️ 完整可运行示例

<div class="todo-container">
  <ul class="todo-list">
<li class="checked">已完成任务一</li>
    <li>待办任务二</li>
    <li class="checked">已完成任务三</li>
    <li>待办任务四</li>
  </ul>
</div>
<button id="deleteBtn" class="btn">清空已完成任务</button>

// 绑定事件（推荐使用 addEventListener，而非内联 onclick）
document.getElementById('deleteBtn').addEventListener('click', deleteCompletedTasks);

function deleteCompletedTasks() {
  // 注意：querySelectorAll 返回 NodeList，支持 forEach（无需转数组）
  document.querySelectorAll('.checked').forEach(item => item.remove());
}

⚠️ 原代码问题分析与修正要点

❌ todoContainer.innerhtml = ...：innerHTML 是只读属性（应为 innerHTML，且赋值会完全重写整个容器内容，丢失未标记项）；
❌ document.getElementByClassName：方法名错误（正确为 getElementsByClassName，返回 HTMLCollection，不支持 forEach）；
❌ removeChild(todoContainer.firstChild)：仅删首子节点，且 firstChild 可能是空白文本节点，非目标
；
❌ 内联 onclick="deletecompletedTask()>" 存在语法错误（多了一个 >），且不利于逻辑解耦。

? 进阶建议（提升健壮性）

若仅想删除
中带 .checked 的元素（避免误删其他类型元素），可限定选择器：
```
document.querySelectorAll('li.checked').forEach(el => el.remove());
```
如需兼容旧版 IE（Array.from(document.querySelectorAll('.checked')).forEach(el => el.parentNode.removeChild(el));

掌握 querySelectorAll 与 Element.remove() 的组合，是操作动态列表的基石能力——简洁、语义清晰、性能可靠。