jQuery Forum

One of the problems with the remove method of jquery ui.tabs is that  after deleting the tab it either selects the tab on the right or if it is the last tab it selects one on the left.

My initial impression was that I could change this behavior by calling the select method in the 'tabsremove' event. But that does not work as the default selection takes place before the event is fired as indicated in the source below:

1. remove: function( index ) {
2.             index = this._getIndex( index );
3.             var o = this.options,
4.                 $li = this.lis.eq( index ).remove(),
5.                 $panel = this.panels.eq( index ).remove();
6.           //DEFAULT SELECTION TAKES PLACE HERE
7.             // If selected tab was removed focus tab to the right or
8.             // in case the last tab was removed the tab to the left.
9.             if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
10.                 this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
11.             }
12.             o.disabled = $.map(
13.                 $.grep( o.disabled, function(n, i) {
14.                     return n != index;
15.                 }),
16.                 function( n, i ) {
17.                     return n >= index ? --n : n;
18.                 });
19.             this._tabify();
20.           //EVENT FIRED HERE
21.             this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
22.             return this;
23.         },

So that I could better control as to what was selected after tab removal I over-rode the remove function like so:

1. $.extend( $.ui.tabs.prototype, {  
   
2.       remove: function( index, nextIndex) {
3.           var o = this.options;
4.      
5.          index = this._getIndex( index );
6.      
7.       //if nextIndex passed use it or use use the default which is follows:
8.       //If selected tab was removed focus tab to the right or
9.         //in case the last tab was removed the tab to the left.
10.       if(nextIndex !== undefined){
11.          nextIndex = this._getIndex(nextIndex);
12.       }else{
13.          if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
14.                nextIndex = index + ( index + 1 < this.anchors.length ? 1 : -1 );
15.          }
16.       };
17.     
18.         //remove this tab
19.       $li = this.lis.eq( index ).remove();
20.         $panel = this.panels.eq( index ).remove();
21.      
22.     
23.       //select the next tab
24.       this.select(nextIndex);
25.       //make sure to remove the removed tab index
26.       //from the disabled list
27.         o.disabled = $.map(
28.             $.grep( o.disabled, function(n, i) {
29.                 return n != index;
30.             }),
31.             function( n, i ) {
32.                 return n >= index ? --n : n;
33.             });
34.       this._tabify();
35.         this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
36.      
37.         return this;
38.     }
39. });
    

USAGE:
.tabs( "remove" , index, nextIndex )
Example:
$tabs.tab("remove", 2, 5);  //This would remove tab at index 2 and then select tab at index 5

I hope it helps someone and I look forward to everyone's feedback.