How To Add A Close Icon In Bootstrap Tabs?

I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon. I try below but the 'X' is displayed not on the same line as tab title. .close { fo

Solution 1:

the working fiddle is here

functionregisterCloseEvent() {

$(".closeTab").click(function () {

    //there are multiple elements which has .closeTab icon so close the tab whose close icon is clickedvar tabContentId = $(this).parent().attr("href");
    $(this).parent().parent().remove(); //remove li of tab
    $('#myTab a:last').tab('show'); // Select first tab
    $(tabContentId).remove(); //remove respective tab content

});
 }

Solution 2:

Try to put the span-tag inside the a-tag:

<aid="user-list-tab-li"style="display:inline;"href="#user-list-tab-pane">The tab<spanclass="close">×</span></a>

And if you use bootstrap include an icon like this:

<iclass="icon-remove"></i>

Solution 3:

Small tweaks to Vinod Louis's answer - relative link to the li list and only show a tab if it is the current one closing.

functionclose_tab (tab_li)
{
    var tabContentId = $(tab_li).parent().attr("href");
    var li_list = $(tab_li).parent().parent().parent();
    $(tab_li).parent().parent().remove(); //remove li of tabif ($(tabContentId).is(":visible")) {
        li_list.find("a").eq(0).tab('show'); // Select first tab
    }
    $(tabContentId).remove(); //remove respective tab content
}

Then attach:

$(".closeTab").click(close_tab(this));

Or:

<button class="close closeTab"type="button" onclick="close_tab(this)" >×</button>