title: Remove dynamically created jquery ui tab
body: <p>I have 7 jquery ui tabs on a jspx page. I dynamically add a new tab to render search results from a search form. So far, so good. Now when the user clicks on any of the other tabs, the newly created tab for "Search Results" must be removed. This is where my problem begins. </p>
  
  <pre><code>                $('#tabs').tabs({
                      select : function(event, ui) { //bind click event to link                   
                          selectedIndex = ui.index;
  
                          if ((selectedIndex &lt; 8) &amp;&amp; ($('#tabs').tabs("length") &gt; 8)) {
                              $('#tabs').tabs('remove',8);
                          }
  
                           //I have other stuff here for each of the original 7 tabs
                   });
  </code></pre>
  
  <p>It seems that this tab is only deletable after I re-initialize the tabs like </p>
  
  <pre><code>$('#tabs').tabs('destroy').tabs();
  $('#tabs').tabs('remove',8);
  </code></pre>
  
  <p>But I have a data grid on my page which is dynamically added to the system of tabs based on the tab index being clicked. If I destroy and then remove, my grid disappears completely form all other tabs(removed from the dom) which is <strong>not</strong> what I want.</p>
  
  <p>Please help, thanks.</p>