Delete from html jquery

Содержание

Удаление, замена и перемещение элементов в jQuery
Удаление элементов со страницы
Удаление всего, что находится внутри элемента: empty()
Удаление элемента целиком: remove()
Удаление элемента без разрушения его данных: detach()
Удаление родительского элемента: unwrap()
Замена элементов
Замена элемента новым содержимым: replaceWith()
replaceAll() : альтернатива методу replaceWith()
Перемещение элементов
Резюме
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Временная шкала на jQuery
Заметка: Перезагрузка и редирект на JavaScript
Category: DOM Removal
.detach()
.empty()
.remove()
.unwrap()
Books

Удаление, замена и перемещение элементов в jQuery

В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:

Удаление элементов со страницы с помощью методов empty() , remove() , detach() и unwrap()
Замена элементов новыми элементами с помощью методов replaceWith() и replaceAll()
Перемещение элементов от одного родительского элемента к другому на странице

Удаление элементов со страницы

Удаление всего, что находится внутри элемента: empty()

Метод empty() — это простейший способ удаления содержимого со страницы. Вызов метода empty() для объекта jQuery удаляет все содержимое из набора, соответствующего элементу (или элементам) в объекте jQuery.

Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.

В примере удаляется содержимое из двух элементов div :

       Параграф с текстом
 
 Другой параграф с текстом
 Текстовый узел, как он есть

После выполнения выше приведённого кода содержимое страницы изменится на :

Удаление элемента целиком: remove()

Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:

       Параграф с текстом

 
 Другой параграф с текстом
 Текстовый узел, как он есть

после выполнения выше приведённого кода оба элемента div будут удалены со страницы:

Вы можете передать строку с условным селектором в метод remove() . В этом случае, удаляемые элементы будут фильтроваться селектором. Например:

       Параграф с текстом
 
 Другой параграф с текстом
 Текстовый узел, как он есть

В выше приведённом примере будет удалён только элемент div , для которого установлен класс removeMe и содержащий текст «Другой параграф». Все остальное останется на странице:

Удаление элемента без разрушения его данных: detach()

Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..

Однако, для того, чтобы сохранить ресурсы и избежать потенциальной проблемы с утечкой памяти, метод remove() удаляет все данные jQuery и события, ассоциированные с удалённым элементом. Например, если элементу было назначено событие jQuery click , а затем элемент был удалён со страницы с помощью метода remove() , то событие click будет удалено из элемента. Это может вызвать проблему, если позже захотите вернуть элемент обратно на страницу и восстановить его функциональность.

В данном случае может помочь метод detach() (появился в jQuery 1.4). Он действует почти также как и метод remove() , за исключением одного — он не удаляет данные jQuery и события, ассоциированные с удалённым элементом. Это означает, что позже вы можете присоединить удалённые элементы обратно с сохранением их метаданных jQuery.

Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS «red» для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.

Затем скрипт удаляет первый параграф со страницы с использованием метода remove() и сохраняет объект jQuery , который содержал параграф в переменной myDiv1Para . Затем повторно присоединяем параграф к родительскому div с помощью метода appendTo() .

Тоже самое мы проделываем со вторым параграфом, только используем метод detach() вместо метода remove() .

   p.red     Параграф с текстом
 
 Другой параграф с текстом

После выполнения данного скрипта первый параграф потеряет обработчик события click , а второй параграф сохранит свою функциональность полностью. Вы можете проверить, открыв страницу в браузере. Если нажать кнопку мыши на втором параграфе, то он будет менять цвет, а первый никак не будет реагировать на действия мыши.

Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.

Далее мы рассмотрим ещё несколько способов переместить элемент.

Удаление родительского элемента: unwrap()

Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.

Следующий пример разворачивает содержание div . Другим словами происходит замещение div его содержимым:

       Параграф с текстом
 Другой параграф с текстом

После выполнения выше приведённого кода, содержание страницы примет следующий вид:

Параграф с текстом

Другой параграф с текстом

Замена элементов

Замена элемента новым содержимым: replaceWith()

Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:

Объект элемента, который создан с помощью функции JavaScript DOM, такой как document.getElementById() или document.createElement()
Строка HTML, представляющая замещающий контент
Объект jQuery, содержащей элемент (или элементы), который будет использоваться для замещения
Возвратная функция, которая должна возвращать замещающий HTML код

Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:

       Параграф с текстом
 
 Параграф с текстом
 
 Параграф с текстом

После выполнения кода содержимое страницы примет вид :

  Новый параграф с текстом
 
  
 Текущее время: 13:52:17

replaceAll() : альтернатива методу replaceWith()

Метод replaceAll() выполняет туже самую работу, что и метод replaceWith() , но вместо передачи замещающего контента в качестве аргумента, вам нужно передать элемент, который нужно заменить.

Например, следующие 2 строки кода делают одно и тоже:

$('#myDiv').replaceWith( "Здесь новый текст
" ); $("Здесь новый текст
").replaceAll( '#myDiv' );

Перемещение элементов

Теперь вы знаете, как удалять и заменять элементы. Остаётся открытым вопрос: как перемещать элементы по дереву DOM? Например, есть параграф внутри элемента div , и нужно его переместить в другой div .

Несмотря на то, что в jQuery нет специального метода для перемещения элементов по дереву DOM, в действительности это очень просто реализовать. Все, что нужно сделать, это выделить элемент(ы), которые вы хотите переместить; затем вызвать метод «добавления» , например, append() , appendTo() или prepend() , чтобы добавить выделенный элемент к другому родительскому элементу. jQuery автоматически распознает, что элемент(ы) уже существует на странице и переместит его к новому родителю.

Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:

       Параграф с текстом

После выполнения кода страница примет следующий вид:

А здесь другой способ перемещения элемента:

// Перемещаем параграф из #myDiv1 в #myDiv2 $('#myDiv1>p').appendTo( $('#myDiv2') ); // Пермещаем параграф из #myDiv1 в #myDiv2 var para = $('#myDiv1>p'); para.prependTo( '#myDiv2' ); // Перемещаем параграф из #myDiv1 в #myDiv2 // с помощью явного отсоединения его и добавления в новое место $('#myDiv1>p').detach().prependTo('#myDiv2');

З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.

Так в выше приведённом примере объект jQuery возвращается методом detach() , который вызывается для удаления параграфа. А метод prependTo() вызывается для возвращённого объекта jQuery, чтобы добавить удалённый параграф к новому родительскому элементу.

Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:

       Параграф с текстом

После выполнения выше описанного кода, содержимое страницы будет выглядеть так:

  Параграф с текстом
 
 Параграф с текстом

Резюме

Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-removing-replacing-moving-elements/
Перевел: Сергей Фастунов
Урок создан: 11 Августа 2010
Просмотров: 321708
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник

Category: DOM Removal

These methods allow us to delete elements from the DOM.

.detach()

Remove the set of matched elements from the DOM.

.empty()

Remove all child nodes of the set of matched elements from the DOM.

.remove()