本文详解如何通过点击“删除”按钮，移除包含商品名称和按钮的整个 <li> 列表项，核心在于正确获取并移除父级元素而非仅删除按钮本身。
本文详解如何通过点击“删除”按钮，移除包含商品名称和按钮的整个 `
在构建动态购物清单时，一个常见需求是：每项商品后附带一个“Delete”按钮，点击后应完整移除该行内容（即整个 <li> 元素），而不仅仅是按钮本身。原始代码中使用 event.target.remove() 会导致只删除 <button class="delete">，留下孤立的商品文本（如 "Notebook "），造成 DOM 结构错乱。
✅ 正确做法：删除父级 <li> 元素
由于每个删除按钮都嵌套在 <li> 内部，我们应通过 event.target.parentElement 获取其直接父元素（即 <li>），再调用 .remove()：
function remove(event) {
event.target.parentElement.remove(); // ✅ 删除整个 <li> 行
}? 提示：event.target 指向被点击的 DOM 元素（这里是 <button>），而 event.target.parentElement 则指向它的上一级容器——正是我们需要移除的 <li>。
? 完整修复后的 JavaScript（关键部分）
// ... 其他已有逻辑（inputLength、createListElement 等）保持不变 ...
function remove(event) {
// 确保 parentElement 存在且为 <li>（增强健壮性）
const listItem = event.target.parentElement;
if (listItem && listItem.tagName === 'LI') {
listItem.remove();
}
}
// 为所有 .delete 按钮绑定事件（注意：需在 DOM 加载完成后执行）
document.addEventListener('DOMContentLoaded', function() {
const delButtons = document.getElementsByClassName("delete");
for (let i = 0; i < delButtons.length; i++) {
delButtons[i].addEventListener("click", remove);
}
});⚠️ 注意事项与最佳实践
- DOM 加载时机：确保脚本在 HTML 元素渲染完成后再执行事件绑定（推荐使用 DOMContentLoaded 或将 <script> 放在 </body> 前）。
-
动态添加项的兼容性：当前代码仅为初始页面上的 .delete 按钮绑定事件；若用户通过“Enter”新增条目，新生成的 <li> 中的删除按钮不会自动拥有事件监听器。解决方案是：
- 使用事件委托（推荐）：为 <ul> 统一监听点击，判断目标是否为 .delete；
- 或在 createListElement() 中为新按钮手动添加事件监听器。
✅ 事件委托示例（更健壮、支持动态元素）：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
ul.addEventListener('click', function(event) {
if (event.target.classList.contains('delete')) {
event.target.parentElement.remove();
}
});这样，无论初始列表还是后续添加的条目，所有删除按钮均可正常工作，无需重复绑定事件。
通过精准操作 DOM 层级关系，即可实现简洁、可靠的一键整行删除功能——这是前端交互开发中理解父子节点关系的经典实践。
