How to add a close icon in bootstrap tabs?
bootstrap-tabs, css, javascript, jquery, twitter-bootstrap
Solution
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
});
}
Problem
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> ```