CODEWITHSUNDEEP
javascriptclassremoveclass
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

javascript - removeClass to elements that has it

I am looking for a pure javascript replacement for this jquery code:

$().evt(function(){
    $('.class').removeClass('active');
    $(this).addClass('active');
})

this is how i am trying

 node.addEventListener('contextmenu', function(e){
            e.preventDefault();
            var currentActive = document.querySelectorAll('.active');
            alert(currentActive.length);
            currentActive.className = '';
            this.className = 'active';
        });

fiddle: http://jsfiddle.net/toniweb/Wx8Jf/34/

But current active class is not removed

Upvotes: 0

Views: 565

Answers (4)

Yohaï-Eliel Berreby
Yohaï-Eliel Berreby

Reputation: 1175

Try this: 

var node = mainNodes[i]; 
node.addEventListener('contextmenu', function(e){
    e.preventDefault();
    var currentActive = document.querySelectorAll('.active');

    for (element in currentActive) {
        element.className = element.className.replace(' active', '');
    }

    e.target.className += ' active';

In the context of the event handler, this will link to the anonymous function. Use e.target instead.

This code will remove the .active class on all elements that have it and add this class to the event target. Other answers only work on the first element with this class, is it what you want?

Updated fiddle: http://jsfiddle.net/Wx8Jf/36/

Upvotes: 0

tewathia
tewathia

Reputation: 7298

Try this:

node.addEventListener('contextmenu', function(e){
            e.preventDefault();
            var currentActive = document.querySelectorAll('.active');
            for (var i = 0; i < currentActive.length; i++) {
                 currentActive[i].classList.remove('active');
            }
            this.className += ' active';
        });

This will remove only the active class from those nodes.

Upvotes: 1

Tony
Tony

Reputation: 7445

Try this to remove any class from the list of the specific element: 

var removeClassName = 'active';
var classes = element.className.match(/\S+/g);
var ind = classes.indexOf(removeClassName);
if (ind >= 0)
    classes.splice(index, 1);
element.className = classes.join(' ');

Upvotes: 0

lostsource
lostsource

Reputation: 21830

You will need to access the correct node as document.querySelectorAll returns a NodeList

Try this,

    node.addEventListener('contextmenu', function(e){
        e.preventDefault();
        var currentActive = document.querySelectorAll('.active');
        if(currentActive[0]) { // first item with class 'active'
            currentActive[0].className = '';
        }
        this.className = 'active';
    });

Updated fiddle: http://jsfiddle.net/Wx8Jf/35/

Upvotes: 1

Related Questions