How to remove all classes except the one you clicked?

Question

This functions starts when I click on a link. It needs to remove all '.is-active' classes on the elements with the attribute [data-route]. And add the class '.is-active' on the [data-route] element that is connected with the link I clicked on.

    toggle: function(section){
        var sections = document.querySelectorAll('[data-route]');
        for (i = 0; i < sections.length; i++){
            document.querySelector('[data-route]').classList.remove('is-active');
        }
        document.querySelector(section).classList.add('is-active');
    }

But this doesn't work. It doesn't remove the classes?

See example: http://jordypouw.github.io/myFED2/deeltoets1/index.html

P.S. it has to be in vanilla JavaScript.

you must loop on all `document.querySelector('[data-route]')`... you need to store that in a variable and loop them. Also you must use `querySelectorAll` — vsync, Sep 23 '14 at 19:35

score 13 · Accepted Answer · answered Sep 23 '14 at 19:43

13

toggle: function(section){
    var sections = document.querySelectorAll('[data-route]');
    for (i = 0; i < sections.length; i++){

        sections[i].classList.remove('is-active');

        // querySelectorAll return an array of dom elements, u can access them directly.

    }

    // I suppose in your case that ' section ' variable is the clicked element so :

    section.classList.add('is-active')

   // if not you have to store the dom element from the event, and add the class here.

}

answered Sep 23 '14 at 19:43

Samsy

365
1
2
12

2

Can't we do this without the loop? like in Jquery we do it. – Tahir Afridi Dec 04 '19 at 13:40
1

@TahirAfridi `document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active'))` You still need a loop, but its more neat – Kalle H. Väravas Dec 28 '20 at 18:25

score 2 · Answer 2 · edited May 23 '17 at 12:07

2

you can do this:

for (var item of document.querySelectorAll('[data-route]')) {
    item.classList.remove('is-active');
}

This is ecmascript6 so it won't work on old browsers. I like it because it's clean and nice. to get it to work on other browsers you must convert the nodes collection into a real array, so you could loop it.

edited May 23 '17 at 12:07

Community

1
1

answered Sep 23 '14 at 19:39

vsync

118,978
58
307
400

Ah yes. I think this guy is right. Forgot that there was a loop being used. – DJ Burb Sep 23 '14 at 19:41
Cool, is this the short version of Samsy his solution? – Jordy Sep 23 '14 at 20:16
yes, his answer is most straight-forward way of doing this, but not the coolest :) – vsync Sep 23 '14 at 21:25

score 1 · Answer 3 · answered Mar 16 '20 at 06:24

toggle: function(section){
    document.querySelectorAll("[data-route]").forEach( e => {

        e.classList.remove("is-active");
    });
    // querySelectorAll return an array of dom elements, u can access them directly.

    // I suppose in your case that ' section ' variable is the clicked element so :

    document.querySelectorAll("[data-route]").forEach( e => {

        e.classList.add("is-active");
    });

   // if not you have to store the dom element from the event, and add the class here.

}

score 0 · Answer 4 · answered Feb 19 '16 at 19:22

0

Set up a variable for the clicked item..

jQuery('.clicker-item').on("click", function(){

var clicked = jQuery('.clicker-item').not(jQuery(this));

clicked.removeClass("active")
jQuery(this).toggleClass("active")


});

answered Feb 19 '16 at 19:22

Tony Porto

11
2

score 0 · Answer 5 · answered Dec 28 '20 at 18:31

I felt, that other answers were not neat enough.

toggle: (s) => {

    // Find all other sections and remove the active class:
    document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active'))
    
    // Add active to the inputted section:
    s.classList.add('is-active')
}

score -2 · Answer 6 · answered Sep 23 '14 at 19:37

-2

shouldn't it be this:

toggle: function(section){
    var sections = document.querySelectorAll('[data-route]');
    for (i = 0; i < sections.length; i++){
        document.querySelector('[data-route]').removeClass('is-active');
    }
    document.querySelector(section).addClass('is-active');
}

Edit: Sorry, I should have said removeClass and addClass

answered Sep 23 '14 at 19:37

DJ Burb

2,346
2
29
38

your answer makes no sense, you are looping `sections` but don't do anything with it inside the loop. – vsync Sep 23 '14 at 19:49
yeah, see my reply under your answer. I overlooked that he was doing a loop – DJ Burb Sep 23 '14 at 20:27
so you can edit your answer or remove it..cause it makes no sense leaving an answer that doesn't work. – vsync Sep 23 '14 at 21:23

How to remove all classes except the one you clicked?

6 Answers6