如何用纯JavaScript的for循环保留点击按钮并移除其余按钮？

核心思路 #

遍历所有按钮，判断每个按钮是否为当前点击的目标，若不是则直接移除。你的问题出在!buttonsX的逻辑错误——元素对象本身是真值，!buttonsX永远为false，无法选中其他按钮，需要直接对比元素或其ID。

简洁实现代码 #

方式1：通过元素本身对比（更直接）

// 获取所有按钮
const buttons = document.querySelectorAll('button');

// 给每个按钮绑定mousedown事件
buttons.forEach(btn => {
  btn.addEventListener('mousedown', function(e) {
    // 遍历所有按钮，移除非当前点击的按钮
    for(let i = 0; i < buttons.length; i++) {
      const currentBtn = buttons[i];
      if(currentBtn !== e.target) {
        currentBtn.remove();
      }
    }
  });
});

方式2：通过ID对比（符合你提到的e.target.id）

const buttons = document.querySelectorAll('button');

buttons.forEach(btn => {
  btn.addEventListener('mousedown', function(e) {
    const clickedId = e.target.id;
    for(let i = 0; i < buttons.length; i++) {
      const currentBtn = buttons[i];
      if(currentBtn.id !== clickedId) {
        currentBtn.remove();
      }
    }
  });
});

补充说明 #

• 用querySelectorAll获取的是静态NodeList，遍历过程中移除元素不会影响循环（因为初始长度已经固定），不用额外处理索引偏移问题。
• 不需要用pull()或splice()，直接调用元素的remove()方法就能从DOM中删除，代码更简洁。

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