current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 115 down vote favorite
23

This question already has an answer here:

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

marked as duplicate by lincolnk, elclanrs Aug 12 '14 at 16:58

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1  
Check this out: stackoverflow.com/questions/195951/… This answer has some good examples. Patrick. –  Patrick Jan 28 '10 at 15:47
    
I would suggest that you check jQuery source and its method removeClass. –  eomeroff Jan 31 '14 at 15:57

14 Answers 14

up vote 70 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
179  
Which removes all classes, not a class. –  Quentin Jan 28 '10 at 15:51
10  
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
4  
Thank, I take this as answer due to simplicity. :-) –  Amra Jan 28 '10 at 15:54
4  
This is not the right answer. It is not removing just the class you want to remove and its assuming that you know what other classes you have. –  jbx Nov 25 '13 at 1:32
2  
This only works if you have a single class per element. Most elements contain multiple classes. –  GoldBishop May 13 '14 at 12:53
up vote 248 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
9  
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 '13 at 12:12
1  
@PauFracés Check the edit history. The inconsistency got introduced by someone else. –  ЯegDwight Jan 8 '13 at 12:20
29  
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 '13 at 15:53
1  
I'm also removing a space if its there: domNode.className.replace(new RegExp(" ?\\b"+cssClass+"\\b"),'') –  B T May 15 '14 at 7:16
up vote 106 down vote

The right and standard way to do it is using classList. However the browser support is limited:

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
1  
FWIW, this works for me on FF 7.0.1, and Chromium 16.0.910.0 –  SW. Oct 19 '11 at 1:38
4  
Very nice! That is so much simpler than regular expressions and splitting className into parts and manually traversing them. –  Victor Zamanian Feb 12 '13 at 23:16
6  
Why it is not best answer? –  dzhioev Mar 21 '13 at 14:02
7  
@dzhioev - I believe because it is relatively new and not supported in older browsers (IE support starts at IE10) –  Tom Pietrosanti Apr 5 '13 at 13:58
5  
On the MDN page there is a shim provided for older browsers. –  Tiberiu-Ionuț Stan Jun 7 '13 at 16:52
up vote 27 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
3  
Very elegant and most applicable to the question. –  Alex Beynenson Dec 3 '12 at 15:07
3  
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 '13 at 14:43
    
@Matthew A logoical programmatic way. Appreciate it. Looks cross-browser too. Is it??? –  Rajesh Paul Oct 5 '13 at 7:17
    
You can also split classes by \t \n \r and \s+, your split-nonregex doesn't take that into account. –  Stefan Steiger Dec 1 '14 at 21:20
up vote 25 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
    
el.className.replace(/(\s|^)someclass(\s|$)/, ' ') If you aren't feeling like creating a helper function. :) –  SalmanPK Jan 14 at 7:33
up vote 10 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
    
Nice, too bad supports starts with IE 10 and Android 3. Why they didn't code this stuff 10 years ago?.. –  Andrew Aug 2 '14 at 23:09
up vote 9 down vote

Edit

Okay, complete re-write. It's been a while, I've learned a bit and the comments have helped.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};

Old Post
I was just working with something like this. Here's a solution I came up with...

// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype,'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g,'');
        },
        writable:false,
        enumerable:false,
        configurable:false
    });
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
    value: function(c) {
        if(this.className.indexOf(c)<0) {
            this.className=this.className+=' '+c;
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double 
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
    value: function(c) {
        this.className=this.className.replace(c,'').replace('  ',' ').trim();
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});

Now you can call myElement.removeClass('myClass')

or chain it: myElement.removeClass("oldClass").addClass("newClass");

share|improve this answer
1  
I'm very late here, but I have an example case where this would not work: Consider an element that has classes testClass and testClass2. (class="testClass testClass2") We wish to remove testClass from the element. Result using your method: class="2" This is why breaking it into an array is favourable. Of course, it is still possible to achieve the correct result using pure string manipulation, but it becomes more complex. If you don't want a mess of code you'll need to use Regex. The advantage of using an array is that the code is easily readable. –  YM_Industries May 15 '14 at 2:06
    
@YM_Industries You're right! I'll edit my post. –  Duncan May 16 '14 at 20:01
    
@Knu Native Element.classList.add() doesn't support the space in "one two". –  Duncan Mar 6 at 11:05
    
@Knu What about ".one.two", ("one", "two", ...), ["one","two"], {"0":"one","1":"two"}... etc. I'll leave non-standard parameter handling to the person implementing their code. :) –  Duncan Mar 6 at 18:41
up vote 7 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 4 down vote

It's very simple, I think.

document.getElementById("whatever").classList.remove("className");
share|improve this answer
4  
This has poor cross-browser support. Internet Explorer doesn't support it in any version prior to 10. developer.mozilla.org/en-US/docs/Web/API/… –  Justin Morgan Aug 26 '13 at 20:58
1  
This to me seems like the right answer. If you are worried about cross browser use a polyfill. github.com/eligrey/classList.js –  Shannon Poole Aug 28 '13 at 16:28
    
@ShannonPoole Sometimes you just need to do a simple task in an IE8-compatible way and you don't want it to depend on library support or a heavy polyfill. –  acjay Feb 19 at 12:53
    
@acjay and sometimes you throw caution to the wind and just follow the modern standard :) –  Shannon Poole Feb 20 at 10:13
up vote 3 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
2  
This would be a great answer had you adapted the code for the specific case in the OP. –  caiosm1005 Oct 8 '13 at 12:57
up vote 1 down vote 
var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
share|improve this answer
up vote 0 down vote

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="";
share|improve this answer
up vote -1 down vote 
document.getElementById("whatever").className += "classToKeep";

With the plus sign ('+') appending the class as opposed to overwriting any existing classes

share|improve this answer
up vote -2 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
2  
He asked for a non jquery answer. –  Karl Morrison May 22 '13 at 0:52
    
Yikes, how did I miss that. –  Ehtesh Choudhury May 22 '13 at 20:51

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