把 click 监听器挂在一直存在的列表容器上，再用 closest() 找到被点击的按钮。之后插入的新行也会把点击事件冒泡给同一个容器。

准备可动态插入的列表

将 HTML 保存为 index.html。

<meta charset="utf-8"><button id="add" type="button">添加</button>

• 删除第一项

<script src="list.js" defer></script>

按钮内部的 span 用来验证点击按钮内文字也能正确匹配。

只监听列表容器的点击

将下面的代码保存为同目录的 list.js。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

const items = document.querySelector('#items');
items.addEventListener('click', (event) => {
  if (!(event.target instanceof Element)) return;
  const button = event.target.closest('button[data-remove]');
  if (!button || !items.contains(button)) return;
  const item = button.closest('li');
  if (item?.parentElement === items) item.remove();
});

点击“删除第一项”后，原有列表项应被移除。

插入新行并验证冒泡

把这段代码追加到 list.js。

let sequence = 1;
document.querySelector('#add').addEventListener('click', () => {
  const item = document.createElement('li');
  const button = document.createElement('button');
  button.type = 'button';
  button.dataset.remove = '';
  button.textContent = `删除第 ${++sequence} 项`;
  item.append(button);
  items.append(item);
});

先添加两行，再分别点击删除按钮。代码只给列表容器绑定一次删除监听。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南