up vote 20 down vote favorite
6

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.

share|improve this question

7 Answers

up vote 18 down vote accepted

You could simply set the elements class to nothing.

document.getElementById("whatever").className = "";

or if you wanted to keep a particular class you could just reset the class

document.getElementById("whatever").className = "";
document.getElementById("whatever").className = "classToKeep";
share|improve this answer
12  
Which removes all classes, not a class. – Quentin Jan 28 '10 at 15:51
3  
This only works if there is only 1 (one) class applied. If there is more than one, this wipes them all out. – scunliffe Jan 28 '10 at 15:51
1  
Thank, I take this as answer due to simplicity. :-) – Amra Jan 28 '10 at 15:54
3  
@Cesar - Maybe you should have stated your requirements better. There is a difference between removing all classes and removing a class. – Keith Rousseau Jan 28 '10 at 16:22
A short good suggestion +1. – Lion Feb 16 '12 at 19:56
up vote 37 down vote 
document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace('/\bMyClass\b/','');

where MyID is the ID of the element and MyClass is the name of the class you wish to remove.

share|improve this answer
Very clever. Will def. try this out. Cheers – Kayote Aug 13 '12 at 13:12
Correct me if I'm wrong but I think that your 1st argument on replace must be a regex, so without enclosing it in quotes: .replace(/\bMyClass\b/,''). But then 'MyClass' must to be a literal, otherwise maybe creating the regex dinamically could work: .replace(new RegExp('\\b' + myClass + '\\b'),'') – Pau Fracés Jan 8 at 12:12
Also the ID of the element used in your example is "element_id" and not "MyID" – Pau Fracés Jan 8 at 12:16
@PauFracés Check the edit history. The inconsistency got introduced by someone else. – ЯegDwight Jan 8 at 12:20
@ЯegDwight But as Nicholas Pickering suggested, that code wont work until it becomes a regexp. See my previous comment – Pau Fracés Jan 8 at 12:34
up vote 12 down vote 
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,' ');
        }
    }
share|improve this answer
up vote 9 down vote

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;
}
share|improve this answer
1  
Very elegant and most applicable to the question. – Alex Beynenson Dec 3 '12 at 15:07
Add an if wrapper [if (typeof HTMLElement.prototype.removeClass !== "function") {] to make this answer most elegant in case browsers add support for removeClass in the future.. – Matthieu Cormier Jan 16 at 14:43
up vote 5 down vote

try:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}
share|improve this answer
up vote 5 down vote

Actually, the right way (standard) to do (but only works with Firefox3.6):

ELEMENT.classList.remove("CLASS_NAME");

I'm going to publish an article about that on http://hacks.mozilla.org next week with fallback mechanism for other browsers.

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

share|improve this answer
FWIW, this works for me on FF 7.0.1, and Chromium 16.0.910.0 – SW. Oct 19 '11 at 1:38
Works on Chrome. Elegant. – Andrew Dec 10 '12 at 20:07
Very nice! That is so much simpler than regular expressions and splitting className into parts and manually traversing them. – Victor Zamanian Feb 12 at 23:16
up vote 3 down vote

Check this out: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript

This answer has some good examples.

Patrick.

share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.