如何隐藏具有相同类名的特定按钮

Question

如何使用vanilla js编写隐藏特定按钮的函数？

<button class"btn">button 1 </button>
<button class"btn">button 2 </button>
<button class"btn">button 3 </button>

例如，我想要的是当我点击按钮2时，按钮1和3将被隐藏。

Answer 1

您可以使用document.querySelector("button:nth-child(2)")获取第二个按钮，addEventListener和style.display满足您的要求。

var second = document.querySelector("button:nth-child(2)");
second.addEventListener("click", button2click);

function button2click() {
  var first = document.querySelector("button:nth-child(1)");
  var third = document.querySelector("button:nth-child(3)");
  first.style.display = 'none';
  third.style.display = 'none';
}

<button class"btn">button 1 </button>
<button class"btn">button 2 </button>
<button class"btn">button 3 </button>