JavaScript .remove()仅移除首个div，无法删除其他及新增div问题求助

我来帮你搞定这个删除按钮的问题！你的代码现在有两个核心问题：

问题原因 #

• 事件绑定只作用于第一个按钮：document.querySelector(".delete-btn")只会选中页面加载时的第一个删除按钮，后面默认的第二个按钮和点击"Add Url"新增的按钮都没有绑定点击事件，所以点它们没反应。
• 删除的总是第一个字段：urlDiv是你一开始用querySelector(".url-pair")选中的第一个字段容器，不管你点哪个删除按钮，执行的都是删除这个固定的第一个容器，自然删不了其他的。

解决方案：使用事件委托 #

事件委托是处理动态元素事件的最佳方案——我们把点击事件绑定到一个已经存在的父容器上，通过判断点击的目标是不是删除按钮，再去处理对应的删除操作。这样不管是页面默认的还是后来新增的按钮，都能触发删除逻辑。

修改后的JavaScript代码如下：

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
// 选中父容器，用来绑定事件委托
const urlsContainer = document.querySelector(".urls-container");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;

// 新增字段的逻辑不变
addBtn.addEventListener('click', () => {
 span.insertAdjacentHTML("beforeBegin", html);
});

// 事件委托：给父容器绑定点击事件
urlsContainer.addEventListener('click', (e) => {
  // 判断点击的是不是删除按钮
  if (e.target.classList.contains('delete-btn')) {
    // 找到当前按钮对应的.url-pair父元素并删除
    e.target.closest('.url-pair').remove();
  }
});

关键改动说明 #

• 移除了原来的deleteBtn和urlDiv变量，改用父容器urlsContainer。
• 把删除事件绑定到父容器上，通过e.target判断点击的元素是不是删除按钮。
• 使用closest('.url-pair')找到当前删除按钮所在的最接近的.url-pair容器，这样就能精准删除点击按钮对应的字段了。

这样修改后，不管是页面默认的还是新增的删除按钮，都能正常删除对应的字段啦！

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