Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 34 down vote favorite
9

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
add comment (requires an account with 50 reputation)

10 Answers

up vote 31 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
32  
Which removes all classes, not a class. – Quentin Jan 28 '10 at 15:51
7  
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
4  
@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
add comment (requires an account with 50 reputation)
up vote 63 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
1  
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
1  
@PauFracés Check the edit history. The inconsistency got introduced by someone else. – ЯegDwight Jan 8 at 12:20
6  
The use of the word boundary metacharacter \b is not suitable here, because the word boundary occurs also between a word character [A-Za-z0-9_] and the dash - character. Therefore a class name e.g. 'different-MyClass' would also be replaced, resulting in 'different-'. There is a better solution which matches whitespace characters around the class name. – Adam Jun 3 at 15:53
show 1 more commentadd comment (requires an account with 50 reputation)
up vote 15 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
2  
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
2  
Why it is not best answer? – dzhioev Mar 21 at 14:02
2  
@dzhioev - I believe because it is relatively new and not supported in older browsers (IE support starts at IE10) – Tom Pietrosanti Apr 5 at 13:58
show 1 more commentadd comment (requires an account with 50 reputation)
up vote 14 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
add comment (requires an account with 50 reputation)
up vote 14 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
1  
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
add comment (requires an account with 50 reputation)
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
add comment (requires an account with 50 reputation)
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
add comment (requires an account with 50 reputation)
up vote 2 down vote 
div.classList.add("foo");
div.classList.remove("foo");

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

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

All of these answers are way too complicated, try

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

The result would be a return of the string

Hello

Super easy. Credits go to jondavidjohn Remove portion of string in Javascript

share|improve this answer
add comment (requires an account with 50 reputation)
up vote -1 down vote

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.

share|improve this answer
He asked for a non jquery answer. – Karl Morrison May 22 at 0:52
Yikes, how did I miss that. – Shurane May 22 at 20:51
add comment (requires an account with 50 reputation)

Your Answer

 
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.