Оглавление

.remove() и .detach()

 Методы .remove() и .detach() Используются для полного удаления элемента из DOM. Оба метода удаляют выбранный элемент из DOM, но метод .detach() сохраняет данные jQuery, ассоциированные с удаляемым элементом, что делает этот метод идеальным для ситуаций, в которых предполагается последующее присоединение данного элемента к DOM в другой точке.


Как .remove(), так и .detach() принимают в качестве необязательного параметра селектор для нахождения элементов, подлежащих удалению. Удалите все абзацы с классом fоо из нашего файла с примером, используя следующий код:

$("p").remove(".foo");

В результате выполнения этого кода абзац с классом f оо исчезнет и больше не будет являться элементом DOM.

 
Чтобы продемонстрировать различие между методами .remove() и .detach(), нам придется забежать немного вперед и воспользоваться методом .data(),  позволяющим присоединять информацию к элементу без введения дополнительных  дескрипторов или атрибутов (более подробно метод .data() рассматривается в следующем разделе).

 
Сначала мы ассоциируем некоторые данные с первым абзацем в DOM. Затем мы удалим элемент с добавленными данными из DOM с помощью метода .detach(), после чего заново присоединим удаленный элемент и попытаемся прочитать данные.


$("p:first").data("test","Это некоторые данные.");
var p = $("p:first").detach();
console.log("Сохраненные данные: "+p.data("test"));
Примечание. В этом примере для вывода служебной информации на консоль Firebug используются предусмотренные специально для Firebug объект console и его метод . log (). Их применение чрезвычайно полезно при отладке сценариев, но при передаче проекта в производственную среду они должны быть удалены из текста сценария во избежание появления ошибок JavaScript на компьютерах, на которых дополнение Firebug не установлено.


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

________________________________________________________________________________________ 

>>> $("p:first").data("test","Это некоторые данные."...sole.log("Сохраненные данные: "+p.data("test"));
Сохраненные данные: Это некоторые данные.
________________________________________________________________________________________


А теперь выполните тот же тест, но на этот раз используйте метод .remove() вместо .detach().


$("p:first").data("test","Это некоторые данные.");
var p = $("p:first").remove();
console.log("Сохраненные данные: "+p.data("test"));


В этом случае, как видно из консольного вывода, данные теряются вместе с удаляемым элементом.

________________________________________________________________________________________
>>> $("p:first").data("test","Это некоторые данные."...sole.log("Сохраненные данные: "+p.data("test"));
Сохраненные данные: undefined
________________________________________________________________________________________


<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити