Question

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:

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.

Answer 1

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!