12

I have some code that adds classes to an element and then tries to remove them and add different ones 1 second later. I'm getting some very odd behavior that I can't even reproduce in a simple jsfiddle example.

Here's the relevant JavaScript code I have:

console.log('before destroyed: ' + currentTile.get(0).className);
currentTile.addClass(classes.destroyed);
console.log('after destroyed: ' + currentTile.get(0).className);

setTimeout(function () {
    console.log('before blanking: ' + currentTile.get(0).className);
    currentTile.removeClass().addClass(classes.blank + ' ui-draggable');
    console.log('after blanking: ' + currentTile.get(0).className);
}, 2000);

And here is what the console is saying:

enter image description here

As you can see, adding the destroyed class works fine, but the call to removeClass() inside of the setTimeout appears to be doing nothing, and then the .addClass(classes.blank + ' ui-draggable'); also appears to be working fine. Also, if I pass a single class to removeClass it removes that one class without a problem.

If it were an issue of context or currentTile being the wrong element, I would think the addClass would also fail? Anyone have any idea what is going on here?

Additional info: jQuery latest (v.1.9.0 I think), jQuery UI v 1.10.0, Chrome v.24.0.1312.56 m

Edit: The problem appears to be directly related to jQuery UI, and can be seen happening in this fiddle.

Edit 2: This was confirmed as a bug in jQuery, and has been fixed.

jbabey
  • 45,965
  • 12
  • 71
  • 94
  • No, calling `removeClass` with no arguments should remove all classes. – mVChr Jan 26 '13 at 00:14
  • @Sparky [Docs](http://api.jquery.com/removeClass/) say if you don't pass anything it removes all classes, and it works that way in the fiddle I linked. – jbabey Jan 26 '13 at 00:14
  • @Sparky No, it should remove all classes. Could you do a test and provide a class name for the removeClass method though and see if it is able to at least remove one of the classes? – pjdanfor Jan 26 '13 at 00:14
  • I went looking it up as you all replied. Yes, I see. – Sparky Jan 26 '13 at 00:15
  • This appears to work for me: http://jsfiddle.net/MvvmJ/1/ – Explosion Pills Jan 26 '13 at 00:15
  • @pjdanfor Good idea. Passing one class to `removeClass` does properly remove the class. – jbabey Jan 26 '13 at 00:16
  • Could this be some kind of UI thing? What happens when jQ UI is removed from this? – Sparky Jan 26 '13 at 00:19
  • @Sparky Removed my calls to `draggable` and `droppable` and it still happens (the element is just missing the `ui-draggable` class, as expected) – jbabey Jan 26 '13 at 00:21
  • 1
    @Sparky Removing the jQuery UI javascript and css files entirely **fixes the issue**, `removeClass()` works as expected. Can anyone figure out what in jQuery UI is breaking this functionality (even when I never call any of it's methods)? – jbabey Jan 26 '13 at 00:23
  • I have no clue why that wouldn't work but how about as a workaround you just take the output from `currentTile.get(0).className` and provide it as the class names for `.removeClass` – pjdanfor Jan 26 '13 at 00:23
  • Sorry, I don't use UI so I can't be much further help beyond my suggestion that removing it might narrow this down. – Sparky Jan 26 '13 at 00:27
  • What is the value of `classes.blank`? – slashingweapon Jan 26 '13 at 01:16
  • [Confirmed](http://jsfiddle.net/bradchristie/MvvmJ/4/) it's jQuery-UI's [removeClass](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.effect.js#L850-L856) that's the problem; looking in to why, now I'm curious. – Brad Christie Jan 26 '13 at 01:19
  • I had the same problem some weeks ago. Coudn't find the answer, though – vals Jan 26 '13 at 10:14

1 Answers1

11

Try using .removeAttr('class') rather than .removeClass().

DEMO:

http://jsfiddle.net/MvvmJ/8/

Hope this helps and let me know if you have any questions!

Dom
  • 38,906
  • 12
  • 52
  • 81
  • 2
    Thanks for the answer. While this is what I will be doing as a workaround, my curiosity will not stop until I figure out why jQuery UI is breaking `removeClass` :P – jbabey Jan 26 '13 at 15:25
  • This is so strange. In my code removeClass() working perfectly on localhost and when i publish it on remote server it is not work. The all parts of code are the same. jQuery and other scripts version are the same too. does anyone have idea? – QMaster Jan 25 '14 at 18:27
  • 2
    @jbabey, did you ever figure out why jQuery UI was breaking removeClass()? We think we're seeing the same problem, and would love to know why... – jeesty Jan 08 '15 at 23:21
  • 2
    @jeesty i reported the bug and it was fixed, so you should not be seeing the same issue anymore. http://bugs.jqueryui.com/ticket/9015 – jbabey Jan 20 '15 at 15:03
  • It's happening to me now – Nejthe Mar 24 '16 at 09:01