Question

I’m using javascript to dynamically add new tabs in jquery. I use the following code:

$("#mytabs1").tabs("add","list.action","New Tab");

My question is how i can add the close button (x button) to those dynamically added tabs?

Answer 1

There is actually an example to achieve this on the jQuery ui tabs demo pages.

Use the tabTemplate property:

HTML template from which a new tab is created and added. The
placeholders #{href} and #{label} are replaced with the url and tab
label that are passed as arguments to the add method

Here’s the code from the site:

var $tabs = $( "#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function( event, ui ) {
        var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
        $( ui.panel ).append( "<p>" + tab_content + "</p>" );
    }
});

// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
    var index = $( "li", $tabs ).index( $( this ).parent() );
    $tabs.tabs( "remove", index );
});

In your implementation, you should not use .live() but delegate() or on(). Something like:

$('#tabs').on('click', 'span.ui-icon-close', function() {
    var index = $( "li", $tabs ).index( $( this ).parent() );
    $tabs.tabs( "remove", index );
});