Removing jquery user interface dynamic tabs

Question

I am creating a web application and I want to use the Tabs widget to replicate the functionality of the tab that you will find in most web browsers. I want the user to be able to: move (sort) tabs, dynamically create tabs, dynamically close tabs.

I have a problem deleting tabs that have been moved.

Suppose there are three tabs named:

one, two and three.

If I move "one", so the tabs look like:

two, three and one

When I delete the "one" that has index 2, the tab "three" is deleted. So the tabs are now:

two and one.

I tested a lot of different scenarios, and it seems to me that when I delete a tab, JQueryUI removes the wrong tab that originally had the index value, and not the tab that currently has the index value.

Answer 1

You are correct that the tabs retain their old index values ​​when they change, which leads to unexpected behavior when you try to delete it. You can force it to update indexes by reinitializing tabs before deleting, for example:

$('#tabs').tabs('destroy').tabs(); $('#tabs').tabs('remove', 2); 

This works because indexes are generated when tabs are configured based on the positions of li elements in the DOM. When you move tabs, li positions are updated in the DOM, even if their index values ​​do not change in the tab plugin.

Of course, if you have a very complicated setup, this can have negative performance implications, in which case you could figure out a different way to update tab indices, or you could maintain an array that maps source indices to current indices.

Answer 2

Annoying deletion is no longer in the jQueryUI tab API . Now you must remove the HTML that displays the tab and panel and refresh the tabs:

 function removeTab(tabId) { var tabIdStr = "#tabs-" + tabId // Remove the panel $( tabIdStr ).remove(); // Refresh the tabs widget tabs.tabs( "refresh" ); // Remove the tab var hrefStr = "a[href='" + tabIdStr + "']" $( hrefStr ).closest("li").remove() } 

https://forum.jquery.com/topic/dynamically-remove-tab

Answer 3

I temporarily solved the problem this way:

 .click(function(e) { $tab.tabs('remove',$tab.tabs('option','selected')); });