Очистить DOM JQuery

Question

У меня есть интерфейс, где я могу переключаться между вкладками, и каждый раз, когда я это делаю, вызывается функция load() и загружает некоторый html в div.

Дело в том, что даже когда я переключаюсь на другую вкладку, содержимое предыдущей вкладки остается в DOM, и я этого не хочу, потому что мне нужно иметь дублирующиеся идентификаторы, а это не очень оптимальное использование памяти.

В общем, вопрос в том, как мне очистить DOM от того, что было загружено ранее в этот div, когда я переключаюсь на другую вкладку?

Было бы еще лучше, если бы я мог назвать загруженное содержимое или что-то еще, а затем удалить из DOM, потому что я не всегда могу знать, где было загружено содержимое.

Answer 1

Использовать .empty() метод на div -элемент, содержащий HTML, который вы хотите удалить.

Если вы не знаете, что это за элемент, вы должны связать select событие (если вы используете вкладки пользовательского интерфейса jQuery) для вкладок, чтобы вы могли сохранить, какая вкладка выбрана в данный момент, а также узнать, какая из них была выбрана ранее.

Пример:

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

Вы также можете связать вышеперечисленное во время создания виджета вкладок, передав опцию анонимной функции:

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

Answer 2

В селекторе выбора освободите ранее выбранную вкладку. Это работает.

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

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

Answer 3

@Markus Ekwall: Вам нужно окружить selectedTab.find[...] jQuery, иначе вы получите "selectedTab не функция".

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

Answer 4

При условии, что контейнер div имеет id просто используйте удалить, как:

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

если вы используете простой JavaScript:

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

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