javascript - ¿Cómo agregar un icono de cierre en las pestañas de bootstrap?

jquery css

Question

Quiero agregar un icono de cierre en las pestañas de bootstrap y luego puedo cerrar la pestaña haciendo clic en el icono.

Intento a continuación, pero la "X" no se muestra en la misma línea que el título de la pestaña.

.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 1

Pequeños ajustes a la respuesta de Vinod Louis : enlace relativo a la lista de li y solo show una pestaña si es el cierre actual.

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
}

Entonces adjunta:

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

O:

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

Answer 2

Trate de poner la etiqueta span dentro de la etiqueta a:

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

Y si usas bootstrap incluye un ícono como este:

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

Answer 3

el violín de trabajo está 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
});
}