DOM jqueryをクリアする

Question

私はタブを切り替えることができるインターフェイスを持っていますが、そのたびにload（）関数が呼び出され、divにいくつかのhtmlが読み込まれます。

私は、別のタブに切り替えても、以前のタブのコンテンツはDOMにとどまり、IDの重複が必要であり、最適なメモリ使用ではないため、その必要はありません。

基本的に、問題は、別のタブに切り替えると、そのdivに以前ロードされたものからDOMを消去するにはどうすればいいですか？

コンテンツがロードされた場所を常に知ることができないため、ロードされたコンテンツまたは何かに名前を付けてDOMから削除することができればさらに良いでしょう。

Answer 1

削除するhtmlを含むdiv要素で.empty()メソッドを使用します。

あなたが現在選択されているタブを保存することができ、以前にどのタブかを知るために、どの要素がわからない場合は、selectイベントをバインドする必要があります（jQuery UIタブを使用する場合）選択された。

例：

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

ます。また、オプションとして匿名関数を渡すことで、タブウィジェットの作成時に上記をバインドすることができます。

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

Answer 2

はのdivコンテナがちょうどidを持っていると仮定すると次のようなremoveを使用してください：

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

普通のJavaScを使用している場合RIPT：

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

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

Answer 3

@Markus Ekwall： あなたは "selectedTabは関数ではありません" 取得しますjQueryを使ってか、他selectedTab.findを[...]囲む必要があります。

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

Answer 4

以前に選択したタブを空にします。これは機能します。

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

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