从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

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 2

 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 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");
});