如何解决动态创建<li>中按钮无法删除父节点的问题

看起来你遇到的问题主要来自两个点：重复使用唯一ID和没有用事件委托处理动态元素，我来一步步帮你解决：

问题分析 #

1. ID重复导致静态项只能删第一个：你给删除按钮用了id="delete"，但HTML里ID是全局唯一的，所以JavaScript只能找到第一个带这个ID的按钮，其他静态按钮根本没绑定事件。
2. 动态元素未绑定事件：如果你的addButton是用来创建新<li>的，那直接给按钮绑定事件的方式只会对页面加载时就存在的元素生效，后续动态创建的按钮不会自动带上事件监听。

解决方案 #

第一步：修正HTML结构 #

把删除按钮的id改成class，因为我们会有多个删除按钮：

<ul id="list-container">
  <li>
    <div class="content">
      <div class="b-group">
        <button class="delete-btn">删除</button>
      </div>
    </div>
  </li>
</ul>
<button id="add">添加新项</button>

第二步：用事件委托实现删除功能 #

我们把点击事件绑定到父元素<ul>上，利用事件冒泡机制来处理所有（包括动态创建的）删除按钮点击：

const addButton = document.getElementById('add');
const listContainer = document.getElementById('list-container');

// 添加新列表项的示例代码（如果你的逻辑不同可以调整）
addButton.addEventListener('click', () => {
  const newLi = document.createElement('li');
  newLi.innerHTML = `
    <div class="content">
      <div class="b-group">
        <button class="delete-btn">删除</button>
      </div>
    </div>
  `;
  listContainer.appendChild(newLi);
});

// 事件委托处理删除
listContainer.addEventListener('click', (e) => {
  // 确认点击的是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 找到对应的<li>元素（这里通过closest方法向上查找最近的li）
    const targetLi = e.target.closest('li');
    if (targetLi) {
      targetLi.remove();
    }
  }
});

关键知识点解释 #

• 事件委托：通过把事件绑定到父元素，不管子元素是静态还是动态创建的，只要触发事件就会冒泡到父元素，我们再通过e.target判断点击的目标是否是删除按钮，这样就能统一处理所有情况。
• closest()方法：可以快速向上查找最近的指定祖先元素，这里用来找到点击按钮对应的<li>，比一层层parentNode更可靠。
• class代替id：class是用来标识一组相同功能的元素的，适合多个删除按钮的场景。

这样修改后，不管是页面初始的静态列表项，还是后续动态添加的，点击删除按钮都能正确删除对应的<li>啦。

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