очистить 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, просто используйте remove, например:

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

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

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

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