2011-01-26 65 views
1

我有一個接口,我可以在標籤之間切換,每次我這樣做,load()函數被調用並加載一些html到div。清除DOM jquery

問題是,即使我切換到另一個選項卡時,以前的選項卡內容仍保留在DOM中,但我不想那樣做,因爲我需要重複的ID,它不是最佳的內存使用情況。

所以基本上,問題是,當我切換到另一個選項卡時,如何清理從之前加載的DOM到該div的DOM?

如果我能夠命名加載的內容或其他東西,然後從DOM中刪除,那將會更好,因爲我無法知道內容的加載位置。

+0

你對標籤有什麼用處? jQuery UI選項卡或另一個插件? – mekwall 2011-01-26 14:06:13

+0

是的,我只用那個 – donkapone 2011-01-26 14:08:13

回答

3

div -element中使用.empty()方法 - 元素包含要移除的html。

如果您不知道是哪個元素,那麼必須爲選項卡綁定select事件(如果您使用jQuery UI選項卡),以便可以存儲當前選定的選項卡,並且還可以知道以前是哪個選項卡選擇。

實施例:

var selectedTab; 
$("#tabs").bind("tabsselect", function(event, ui) { 
    if (selectedTab) { 
     selectedTab.find("div").empty(); 
    } 
    selectedTab = ui.panel; 
}); 

也可以通過將匿名功能作爲選項結合在舌片構件的創建時以上:

select: function(event, ui) { ... } 
+0

你怎麼知道他在使用jQueryUI標籤? – jAndy 2011-01-26 13:58:05

0

假設在div容器具有id只是使用刪除,如:

$("#id").remove(); 

如果您使用普通JavaSc RIPT:

var tab = document.getElementById("id"); 

if (tab.hasChildNodes()) 
{ 
    while (tab.childNodes.length >= 1) 
    { 
     tab.removeChild(tab.firstChild); 
    } 
} 
1

@Markus Ekwall: 你需要圍繞selectedTab.find [...]與jQuery,否則你會得到 「selectedTab不是一個函數」。

$(selectedTab).find("div").empty(); // or jQuery(selectedTab).find("div").empty(); 
1

在選擇選擇器中,清空先前選擇的選項卡。這工作。

$("#tabs").tabs({ select: function(event, ui) { 

    var selectedPanel = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)"); 
    $(selectedPanel).empty();