Remove same class from several element in javascript

Question

I have 4 Button with class of active and now I wanna remove all of those class and then only add 1 class to the one I clicked on.

<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

here is code I wrote so far:

let buttonOptions = document.querySelectorAll(".btn");
for (let i=0; i< buttonOptions.length; i++) {
    buttonOptions.addEventListener('click', function() {
        buttonOptions[i].classList.add("active");
    });   
}

but I don't know how should I remove those active class. and also I wanna know there is a way to avoid using for specifically for removing class?

Answer 1

var buttons = document.getElementsByClassName("btn");

function removeAllActive() {
  [].forEach.call(buttons, function(el) {
    el.classList.remove("active");
  });
}

removeAllActive();

[].forEach.call(buttons, function(el) {
  el.addEventListener("click", function() {
    removeAllActive();
    el.classList.add("active");
  });
});

.active {
  background-color: red;
}

<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

Answer 2

You could avoid using a for loop, but you'd still have to iterate, so there's really no point. I'll use forEach as it's supported on querySelector and looks a little cleaner, but a for loop is fine as well

Same goes for binding the event handler, you have to iterate and target each element

let buttonOptions = document.querySelectorAll(".btn");

buttonOptions.forEach( el => 
    el.addEventListener('click', function() {
        buttonOptions.forEach( els => els.classList.remove('active') )
        this.classList.add("active");
    })
)

.active {color : red}

<button class="active btn">btn1</button>
<button class="btn">btn2</button>
<button class="btn">btn3</button>
<button class="btn">btn4</button>

Answer 3

document.getElementById('buttons').addEventListener('click', function(evt) {
  if (evt.target.classList.contains('btn')) {
    Array.from(document.querySelectorAll('.btn', this)).forEach(x => {
      x.classList.toggle('active', x == evt.target)
    });
  }
});

.active {
  color: red;
}

<div id="buttons">
  <button class="active btn">btn1</button>
  <button class="btn">btn2</button>
  <button class="btn">btn3</button>
  <button class="btn">btn4</button>
</div>

Attaching a listener to each button is wasteful. I attach a listener to a containing element, then wait for the event to bubble up to it. If the click originated from one of the btn-classed elements, then I find all the btn-classed elements within it and switch their active class based on whether they are the clicked button or not.

Answer 4

Here is the easiest way to resolve the mentioned issue,

$(function){
   $(document).on("click",".btn",function(){
      $(".btn").removeClass("active");
      $(this).addClass("active");
   });
});

Answer 5

If you are allowed to use jquery, it will be much easier for you. Please have a look on the below code,it may help you

<script>
$( document ).ready(function() {
    $('.btn').removeClass('active');
	$('.btn').click(function(e) {
		$('.btn').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="active btn">btn1</button>
<button class="active btn">btn2</button>
<button class="active btn">btn3</button>
<button class="active btn">btn4</button>

Answer 6

Try this one:

$(document).on("click",".btn",function(){
   $(".btn").removeClass("active");
   $(this).addClass("active");
});