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.

.close {
    font-size: 20px;
    font-weight: bold;
    line-height: 18px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
    text-decoration: none;
    display:inline;
}
.close:hover {
    display:inline;
    color: #000000;
    text-decoration: none;
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: pointer;
}

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

score 33 · Accepted Answer · answered Aug 07 '13 at 07:10

33

the working fiddle is here

 function registerCloseEvent() {

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

    //there are multiple elements which has .closeTab icon so close the tab whose close icon is clicked
    var 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

});
 }

answered Aug 07 '13 at 07:10

Vinod Louis

4,812
1
25
46

3

i think its better to use hide(). si it easier to show() it again. – Or Duan Aug 07 '13 at 07:13
3

-1 for fiddle example, where you put – m_david Oct 17 '15 at 14:53
I would add a check to see if the to-be-removed tab is currently displayed before displaying the last one: `if ($(tabContentId).is(":visible"))` – Jesse Sierks Mar 29 '16 at 00:00
1

@m_david what is the alternative if you want the button to appear on the tab as shown in the fiddle, but want to avoid ` – PurpleVermont Sep 09 '16 at 18:41

score 10 · Answer 2 · answered Aug 07 '13 at 07:15

10

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

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

And if you use bootstrap include an icon like this:

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

answered Aug 07 '13 at 07:15

zuluk

1,557
8
29
49

2

The issue is that even though the close button was clicked, an event is sent to the tag because that is clicked as well. – Ilan Biala Jan 19 '14 at 16:54
1

`event.preventDefault()`should handle this case. – zuluk Jan 20 '14 at 10:12
yep I know, I'm just saying that there is something to watch out for as well, and just not `return false;` because that does other things in addition to preventing the default actions. – Ilan Biala Jan 21 '14 at 22:02
I've used this solution, but `event.preventDefault()` was not what I needed: to stop the parent `` tag registering the event I had to use `event.stopPropagation()`. – Alessandro Jun 02 '19 at 09:57

score 0 · Answer 3 · edited May 23 '17 at 11:54

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:

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

How to add a close icon in bootstrap tabs?

3 Answers3

Linked