jquery add/remove styles/classes

Question

I have been trying to edit the jquery buttons in order to modify them one by one but the problem I seem to be having is that even when adding the class they seem to be getting overwritten.

How can I remove a class and then add one?

Classes: (one of these does default button style) .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default

(one of these does hover on button) .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus

I can figure out which does what by trial and error unless someone knows right away, but whats going to be best way to remove the class and add my own?

Answer 1

$(element).removeClass(classesToRemove).addClass(classesToAdd);

Answer 2

It sounds like you want to customize the jQueryUI button look? Maybe you should do so by customizing the jQueryUI theme.

If you still want to add or remove classes to the button, you can also hook into the create event , which fires when a button is created.