sureone sureone - 6 months ago 30
Javascript Question

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 {
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>

Answer

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

});
 }