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?

Easy solution with jQuery without using loops, if you're interested. — Gezzasa
– Gezzasa, Commented Feb 15, 2017 at 8:47

Weedoze · Accepted Answer · 2017-02-15 08:47:40Z

3

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>

answered Feb 15, 2017 at 8:47

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2017-02-15 09:06:47Z

3

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>

edited Feb 15, 2017 at 9:06

answered Feb 15, 2017 at 8:44

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

Albert Lazaro de Lara Over a year ago

Using jQuery can avoid iterate all elements to remove active class.

adeneo Over a year ago

@albert - not really, jQuery iterates internally and does the exact same thing.

Amadan · Accepted Answer · 2017-02-15 08:56:34Z

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.

phant0m · Accepted Answer · 2017-02-15 10:03:15Z

1

Here is the easiest way to resolve the mentioned issue,

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

edited Feb 15, 2017 at 10:03

phant0m

17k6 gold badges52 silver badges84 bronze badges

answered Feb 15, 2017 at 9:11

Roshin Thomas

1331 gold badge2 silver badges12 bronze badges

Comments

Azeez Kallayi · Accepted Answer · 2017-02-15 08:50:02Z

0

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>

answered Feb 15, 2017 at 8:50

Azeez Kallayi

2,6421 gold badge17 silver badges19 bronze badges

Comments

Pooja Roy · Accepted Answer · 2017-02-15 08:51:25Z

0

Try this one:

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

answered Feb 15, 2017 at 8:51

Pooja Roy

5455 silver badges25 bronze badges

Collectives™ on Stack Overflow

Remove same class from several element in javascript

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related