单击按钮 2 时如何从按钮 1 中删除 class - Vanilla JS

Question

我正在尝试对按钮 1（带有 css class 的粗体和蓝色文本）进行突出显示。但是当然，当我单击菜单中的另一个按钮时，class 应该从按钮 1 中删除。

let buttons = document.querySelectorAll(".ef-button");

for (let i = 0; i < buttons.length; i++) {

   buttons[i].addEventListener("click", function () {

      if (buttons[i].classList.contains("active-element")) {
         buttons[i].classList.remove("active-element");
      } else {
         buttons[i].classList.add("active-element");
      }

   })

}

这是我写的。我可以点击每个按钮来突出显示它，但是当我点击另一个按钮时，它不会从第一个按钮中删除 class ... 无论如何，我可以点击一个已经突出显示的按钮再次删除 class。

我需要的是“重置”，从我点击的按钮中删除 class。

当我点击按钮时：

Answer 1

这样：
for those who want to avoid searching in the MDN Doc1

document
.querySelectorAll('.ef-button')
.forEach( (btClickEv,_,buttons) =>
  {
  btClickEv.onclick = () =>
    buttons.forEach(bt=>bt.classList.toggle('active-element',bt===btClickEv))
  })

.ef-button       { background : pink; }
.active-element  { background : green; }

<button class="ef-button"> bt1 </button> 
<button class="ef-button"> bt2 </button> 
<button class="ef-button"> bt3 </button> 
<button class="ef-button"> bt4 </button> 
<button class="ef-button"> bt4 </button>

单击按钮 2 时如何从按钮 1 中删除 class - Vanilla JS

How to remove class from Button 1 when clicking on Button 2 - Vanilla JS

javascript

loops

event-handling