javascript - removeClass to elements that has it

Question

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

Answer 1

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.

Answer 2

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/

Answer 3

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(' ');

Answer 4

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/