JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
    </ul>
    <div id="tabs-1">
        One Contents
    </div>
    <div id="tabs-2">
        Two Contents
    </div>
    <div id="tabs-3">
        Three Contents
    </div>
</div>

<button>Remove first tab</button>

JavaScript

$.Widget.prototype._off = function( elements, eventName ) {
    var instance = this;
    eventName = (eventName || "")
        .split( " " )
        .join( this.eventNamespace + " " ) + this.eventNamespace;
    elements.unbind( eventName ).undelegate( eventName );
    function offHelper( list, element ) {
        var index = list.index( element );
        if ( index !== -1 ) {
            list.splice( index, 1 );
        }
    }
    elements.each(function( arrayIndex, element ) {
        offHelper( instance.bindings, element );
        offHelper( instance.hoverable, element );
        offHelper( instance.focusable, element );
    });
};

$.widget( "ui.tabs", $.ui.tabs, {
    removeTab: function( index ) {
        var activeNav = this._findActive( index ),
            activeTab = this._getPanelForTab( activeNav );

        this._off( activeNav );
        this._off( activeNav.find( "a" ) );
        this._off( activeTab );

        activeNav.remove();
        activeTab.remove();
        
        this.refresh();
    }
});

var tabs = $( "#tabs" ).tabs();
$( "button" ).on( "click", function() {
    tabs.tabs( "removeTab", 0 );
});