CODEWITHSUNDEEP
javascripthtml
Roster
Roster

Reputation: 1964

How to remove the active class from all children in a parent using Javascript

I have created 3 div having the same class in a parent , and on the child element i am adding the active class and on click of second child adding the active class again but this time i want to remove the active state for first element. How can i remove it in effective way?

Here is my code

<div class="tab-div">
  <div class="tab">default</div>
  <div class="tab" >hover</div>
  <div class="tab">active</div>
</div>

Here is my javascript

var elements = document.querySelectorAll('.tab');
for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
    elements[i].onclick = function (event) {
        console.log("ONCLICK");
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}

Upvotes: 7

Views: 12262

Answers (3)

Emjay
Emjay

Reputation: 1

Since all of them have a class called tab, make sure you remove the class or property of active from all the classes by targeting the class tab and it would remove from all without doing any loop. Then add the property to the current one that is clicked.

$(".tab").click(function(){
  $(".tab").removeClass('active');  
  $("this").addClass('active');
});

If the class is in the parent you can do sth like

$(".tab").click(function({
  $(".tab").parent().removeClass('active');
  $("this").parent().addClass('active');
});

Upvotes: 0

Code_Frank
Code_Frank

Reputation: 381

I suppose it depends how many divs you will ultimately have, and if only one div should be active at a time, but I think it would be more efficient to just find the active div and remove the class from that one rather than looping through all of them e.g.

var oldActiveElement = document.querySelector('.active');
oldActiveElement.classList.remove('active');

var newActiveElement = event.target;
newActiveElement.classList.add('active');

Upvotes: 4

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You are not removing the active class from all elements when click event is triggered. So, what you can do is to loop over again to all the div and remove the active class on click event. I have created a custom function removeClass() that removes the active class on click event.

var elements = document.querySelectorAll('.tab');
for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
    elements[i].onclick = function (event) {
        console.log("ONCLICK");
        //remove all active class
        removeClass();
        if (event.target.innerHTML === this.innerHTML) {
            this.classList.add("active");
        }
    }
}

function removeClass(){
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('active');
  }
}
.active{
 color: green;
}
<div class="tab-div">
  <div class="tab">default</div>
  <div class="tab" >hover</div>
  <div class="tab">active</div>
</div>

Upvotes: 6

Related Questions