Thursday 13 October 2011

Tidying up closed jQuery UI Tabs

A wee tip:

If you use jQuery UI tabs you may have noticed the that .remove() method does not really get rid of the tab, it clears the.html() and hided the [div] container. Now that is fine and dandy if you have a app that people dip into infrequently, however if you app stays open all day and users are opening and closing tabs frequently and not refreshing the page the tabs are on .. then your DOM can get very heavy with unused [div]s.

An easy way to get rid of them is to use this wee bit of code everynow and then for example on a setTimeout(), the code parses the DOM for any div defined as a tab tests if it is empty and removes it.

$('div[id^=ui-tabs-]:hidden').each(
                                                        function(index)
                                                        {
                                                            if($(this).html() == "")
                                                            {
                                                                $(this).remove();
                                                            }
                                                        }
                                                        )
Steve

Disqus for Domi-No-Yes-Maybe