8

I have an element like this:

<div class="one two three" id="waterhorse">horse</div>

When I run this code in the browser console:

$("#waterhorse").removeClass();

I get this:

[<div id=​"waterhorse" class=​"one two three">​horse​</div>​]

In other words, it doesn't work; it doesn't remove any classes on the element. I unfortunately can't reproduce it in jsfiddle.

However, I can remove a specific class:

$("#waterhorse").removeClass("two");

Also, this will remove all classes:

$("#waterhorse").removeAttr("class");

Any idea why the latter works to remove all classes, but the former doesn't?

mises
  • 125
  • 1
  • 1
  • 6
  • This is not reproducible in jsfiddle? – Konstantin Dinev May 03 '13 at 09:13
  • 3
    @roasted Citing from the [jQuery spec](http://api.jquery.com/removeClass/): "If no class names are specified in the parameter, all classes will be removed." So this should work. – Sirko May 03 '13 at 09:14
  • @Sirko Ya, just saw that in doc – A. Wolff May 03 '13 at 09:15
  • 4
    Works here: http://jsfiddle.net/tKTgE/1/ – A. Wolff May 03 '13 at 09:17
  • 2
    @mises Any particular browser (version) you see this behavior? Or any special context? – Sirko May 03 '13 at 09:18
  • [It must work though](http://stackoverflow.com/a/1424991/1225328). – sp00m May 03 '13 at 09:24
  • What browser and browser version are you using? – Ejaz May 03 '13 at 09:27
  • 1
    Closing as too localised. The code does work, your problem cannot be replicated, and you can't even be bothered to elaborate the details. – dsgriffin May 03 '13 at 09:28
  • I'm using Chrome, Canary, and FF, all with the same result. – mises May 03 '13 at 23:40
  • 2
    I have the same problem. I know the code used to work with an older version of jQuery. It seems like it's a problem with the combination of jQuery 1.9.1 and jQuery UI 1.10.0. If I remove the reference to jQuery UI, then the removeClass() function works again. I will try to test the slightly newer versions of jQuery and JQuery UI to see if they fix the problem. – Ben Mills May 30 '13 at 14:20

3 Answers3

10

Seems like this is a known problem with jQuery and jQueryUI not playing nicely together:

Odd issue with jQuery .removeClass() not doing anything

http://bugs.jqueryui.com/ticket/9015

The answer above is a workaround that uses .removeAttr('class') instead of .removeClass()

Community
  • 1
  • 1
Ben Mills
  • 27,454
  • 14
  • 42
  • 38
-1

If we read the documentation it states this:

If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.

In other words, .removeClass() should work without parameters. I've tried this in FF and this works as intended.

I tried to reproduce the problem you are experiencing, but it couldn't do it: jsFiddle

<div class="one two three" id="waterhorse">horse</div>

$("#waterhorse").removeClass();
$("#waterhorse").addClass("four");
console.log($("#waterhorse"));

What browser version are you using?

MMeersseman
  • 2,541
  • 1
  • 13
  • 8
-2

You can do this in $(document).ready() to achieve this.

$("#waterhorse").attr("class", "");

or

$("#waterhorse").removeClass();

Hope this will help you.:)

Surama Hotta
  • 130
  • 3