Remove CSS class from element with JavaScript (no

Question

This question already has an answer here:

• How to change an element's class with JavaScript? 25 answers

Could anyone let me know how to remove a class on an element using JavaScript only? Please do not give me an answer with jQuery as I can't use it, and I don't know anything about it.

Answer 1

div.classList.add("foo");
div.classList.remove("foo");

More at https://developer.mozilla.org/en-US/docs/Web/API/element.classList

Answer 2

The right and standard way to do it is using classList. It is now widely supported in the latest version of most modern browsers:

ELEMENT.classList.remove("CLASS_NAME");

Documentation: https://developer.mozilla.org/en/DOM/element.classList

Answer 3

Here's a way to bake this functionality right into all DOM elements:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}

Answer 4

There is also $.toggleClass, $.addClass, and $.removeClass. For documentation, take a look at http://api.jquery.com/toggleClass/.

Take a look at this jsFiddle example to see it in action.

Answer 5

I use this JS snippet code :

First of all, I reach all the classes then according to index of my target class, I set className = "".

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";

Answer 6

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }
    }