बूटस्ट्रैप टैब में एक करीबी आइकन कैसे जोड़ें?

Question

मैं बूटस्ट्रैप टैब में एक करीबी आइकन जोड़ना चाहता हूं और फिर मैं आइकन पर क्लिक करके टैब बंद कर सकता हूं।

मैं नीचे कोशिश करता हूं लेकिन "एक्स" टैब शीर्षक के समान लाइन पर प्रदर्शित नहीं होता है।

.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

काम कर रहे बेला 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 

}); 
} 

Answer 2

एक-टैग के अंदर अवधि टैग डाल करने की कोशिश:

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

और अगर आप बूटस्ट्रैप का उपयोग जैसा आइकन में शामिल हैं:

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

Answer 3

एसएम Vinod Louis के उत्तर में सभी tweaks - li सूची के सापेक्ष लिंक और केवल show एक टैब यदि यह वर्तमान बंद हो रहा है।

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 
} 

तो देते हैं:

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

या:

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