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