How to add a close icon in bootstrap tabs?

Question

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.

Answer 1

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.

function close_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 tab
    if ($(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:

×