How to remove unused classes from jQuery UI

Question

We use jQuery UI lib for some interface improvements that work great. But since we do not need to support IE6 and other older browsers, there is no need for classes such as:

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl

which are added by the jQuery user interface. Is there a way to tell jQuery UI not to add them? It is not a problem to remove a style from it, but it doesn’t look very good when you have many empty classes there.

Answer 1

This is one of the possible ways to achieve this.

The jQuery widget UI raises the “create” event that fires between the execution of the _create () and _init () methods:

 this._create(); this._trigger( "create" ); this._init(); 

This event is created from the widget of the base object, so it is available to all widgets that implement it.

Classes for the "Ui-angle-xxx" (and others) are usually created in the '_create () method, so you can associate the event handler with the "create" widget option to remove these classes. Sort of:

 var classesToRemove = ['ui-corner-all', 'ui-corner-top', 'ui-corner-bottom', 'ui-corner-right', 'ui-corner-left', 'ui-corner-tl', 'ui-corner-tr', 'ui-corner-bl', 'ui-corner-br']; var removeClassesCreateHandler = function(event, ui) { var that = this; $.each(classesToRemove, function(idx, val) { $('.' + val, that).removeClass(val); }); }; $("#accordion").accordion({ create: removeClassesCreateHandler }); 

Here is a working jsfiddle example.

---

About the jQuery UI Widgets create event

It is important to note that not all jQuery UI widgets actually implement the Factory widget (thanks to the above solution is possible).

So, although the create option is displayed on the documentation page, it is not always available.

This is the case for Datepicker, for example. It still relies on fairly old code and does not implement Widget Factory (yet - it will be reorganized).

Answer 2

I used a dust bag selector to remove unnecessary css. It really helped me get rid of unused styles.