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, however in another it seems to be failing.

I threw together a very minimalist test case on jsFiddle, and it is also failing:

http://jsfiddle.net/ew47Y/1/

HTML:

<div class="foo" id="foo">
    hello
</div>​

JS:

$(document).ready(function(){
     foo = document.getElementById('foo');
     foo.className += ' bar foobar';
     alert(foo.className);
     foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )
     alert(foo.className);
})​

Answer 1

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'); 

)

Answer 2

Don't forget about classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/