Remove classname from element with javascript

Question

I found the following regex from another Stack Overflow question: Change an element's class with JavaScript

And have used it in part of my script with success, h

Answer 1

There is also a solution which use the word boundary metacharacter \b:

foo.className.replace(/\bbar\b/g ,'');

This can suite somebody, but be aware the word boundary occurs also between a word character [A-Za-z0-9_] and the dash - character. Therefore a class name e.g. 'different-bar-class' would also be replaced resulting in 'different--class'. However, as opposed to the above solutions, the "\b" solution doesn't remove the whitespace character \s before the class name, which may be desired, so a string e.g. 'firstbar bar' will end up as 'firstbar '.

Answer 2

Don't forget about classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

Answer 3

foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

or with jQuery (which you seem to be using):

foo.removeClass( 'bar' );

Answer 4

That's because replace doesn't actually modify the string you call it on; rather, it returns a new string. So:

     foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )

(By the way, you don't actually need to do this in raw JavaScript, since jQuery objects offer a removeClass method: http://api.jquery.com/removeClass/. So you could write:

     $('#foo').removeClass('bar');

or:

     $(foo).removeClass('bar');

)