YUI: TabView: Add a close button to a tab

Dynamically create and delete a tab

Tab One Content

Tab Two Content

Tab Three Content

The HTML

The Javascript

YAHOO.example.tabs = function() {
    var t_counter = 0;  // iterator for new tab labels
    
    var myTabs = new YAHOO.widget.TabView('demo');
    
    myTabs.on('contentReady', function() { // ensure Tabs exist before accessing
        YAHOO.util.Dom.batch(myTabs.get('tabs'), function(tab) {
            YAHOO.util.Event.on(tab.getElementsByClassName('close')[0], 'click', handleClose, tab);
        });
        
        YAHOO.util.Event.on('add-tab', 'click', addTab, myTabs, true);
    });
    
    var handleClose = function(e, tab) {
        YAHOO.util.Event.preventDefault(e);
        myTabs.removeTab(tab);
    };
    
    function addTab(e) {
        YAHOO.util.Event.preventDefault(e);
        t_counter++;
        var newTab = new YAHOO.widget.Tab({
            label: 'New Tab #' + t_counter + '<span class="close">X</span>',
            content: 'New tab content for Tab # ' + t_counter + ' goes here.'
        });
        
        this.addTab(newTab);
        YAHOO.util.Event.on(newTab.getElementsByClassName('close')[0], 'click', handleClose, newTab);
    };
}();