jquery選項卡上創建/刪除新選項卡時有額外填充

Question

我有一個Jquery選項卡問題，並且更精確地在每個選項卡之間填充，在我的頁面上，我創建和刪除多次。

，我創建和刪除一個選項卡，額外的空間每次留在標籤領域：

爲什麼[主窗口]之間[標籤1]的距離之間並不相同[Tab 1]和[Tab 9]考慮到中間已經創建並刪除了8個新選項卡？

HTML：

<div id='demo'> 
<ul> 
    <li><a href="#main">Main Tab</a></li> 
    <li><a href="#ref">Tab 1</a></li> 
</ul> 
<div id='main'>Main</div> 
<div id='ref'>Reference tab</div> 
</div> 

的JavaScript：

$('#demo').tabs(); 
var tabs = $("#demo").tabs(); 
var ul = tabs.find("ul"); 
//-- Create 10 tabs 
for (i = 1; i < 10; i++) { 
    $("<li><a href='#tab" + i + "'>Tab " + i + " </a></li>").appendTo(ul); 
    $("<div id='tab" + i + "' style=''>This is the tab " + i + "</div>").appendTo(tabs); 
} 
tabs.tabs('refresh'); 

//-- Delete 9 tabs 
for (i = 1; i < 9; i++) { 
    $("#demo ul a[href^=#tab" + i + "]").remove(); 
    $("#demo div[id^=tab" + i + "]").remove(); 
} 
tabs.tabs('refresh'); 

這是的jsfiddle重現它

http://jsfiddle.net/wh3ct1cn/

Answer 1

問題是你只是刪除錨點，而不是整個列表項。這裏有一個修復：

$("#demo ul a[href^=#tab5]").parent('li').remove(); 

Demo

---

而不是從DOM刪除它們，爲什麼不使用remove()功能？

//-- Delete tabs 5, 6, and 7 
for (i = 7; i > 4; i--) { 
    $("#demo").tabs('remove', i); 
} 

Demo

我以相反的順序工作，因爲該指標每次操作後改變。

Answer 2

您需要刪除li元素，而不是a元素。

$（「#demo ul a [href^=＃tab」+ i +「]」）.parent（）。remove（）;