Click button to toggle class of parent element – pure javascript

July 1, 2022

I have multiple divs on the page with the class ‘item’ – I’d like to include a button within the div that when clicked will toggle append/remove the class ‘zoom’ on the ‘item’ div…

<div class="item">
<button class="zoomer"></button>
</div>

I’ve found plenty of code examples that target an id element, but struggling to find a solution that works with multiples of the same class element on one page.

Many thanks in advance!

>Solution :

You can use querySelectorAll to get all of the buttons and then you can use forEach so you can target the element’s item parent.

// Get all the buttons
let zoomer_button = document.querySelectorAll('.zoomer');

// Loop through the buttons.
// Arrow function allows to pass the element
zoomer_button.forEach(button => {
  // Add an event listener for a click on the button.
  button.addEventListener('click', function(e) {
    // the e is the event, and then you check what the target is, which is the button.
    // then you can toggle a 'zoom' class on the parent 'item'
    e.target.parentNode.classList.toggle('zoom');
  });
});

.item.zoom {
  background-color: blue;
}

<div class="item">
  <button class="zoomer">button</button>
</div>
<div class="item">
  <button class="zoomer">button</button>
</div>
<div class="item">
  <button class="zoomer">button</button>
</div>
<div class="item">
  <button class="zoomer">button</button>
</div>
<div class="item">
  <button class="zoomer">button</button>
</div>

If it’s nested a layer deeper, you can use parentNode twice.

// Get all the buttons
let zoomer_button = document.querySelectorAll('.zoomer');

// Loop through the buttons.
// Arrow function allows to pass the element
zoomer_button.forEach(button => {
  // Add an event listener for a click on the button.
  button.addEventListener('click', function(e) {
    // the e is the event, and then you check what the target is, which is the button.
    // then you can toggle a 'zoom' class on the parent 'item'
    e.target.parentNode.parentNode.classList.toggle('zoom');
  });
});

.item.zoom {
  background-color: blue;
}

<div class="item">
  <div class="media">
    <button class="zoomer">button</button>
  </div>
</div>
<div class="item">
  <div class="media">
    <button class="zoomer">button</button>
  </div>
</div>
<div class="item">
  <div class="media">
    <button class="zoomer">button</button>
  </div>
</div>
<div class="item">
  <div class="media">
    <button class="zoomer">button</button>
  </div>
</div>