CODEWITHSUNDEEP
javascriptfunction
Pusoy
Pusoy

Reputation: 11

How to hide a specific button with the same class name

How can I write a function that hides a specific button using vanilla js? 

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

For example what I want is when I click button 2, button 1 and 3 will be hidden.

Upvotes: 1

Views: 39

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18965

You can use document.querySelector("button:nth-child(2)") for getting 2nd button, addEventListener and style.display for your requirement.

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>

Upvotes: 1

Related Questions