Как скрыть определенную кнопку с тем же именем класса

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)") для получения 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>