Как удалить элемент jquery
jQuery — удаление элемента
Удаление элементов можно выполнить с помощь следующих четырех методов:
Рассмотрим каждый из методов подробно. В конце каждого метода предлагается сделать не большое задание для закрепления материала.
Удаление элемента методом empty().
Метод empty() — удаляет все внутренности соответствующему элементу. Элемент после обработки данным методом остается пустым. Рассмотрим на примере
После выполнения функции delFunc(); удаляются все три параграфа (
) и получаем следующий код страницы.
Удаление элемента методом remove().
Метод remove() более мощный, он удаляет не только дочерние элементы внутри найденного, но и сам элемент. В этом его главное отличие от метода empty().
При выполнении функции delFunc(); получим следующий результат:
Удаление элемента методом detach().
В jQuery удаление элемента производиться методом detach() в тех случаях, когда удаляемый элемент планируется восстановить. При использовании этого метода также удаляются и могут быть полностью восстановлены все события привязанные к удаляемому элементу.
Метод remove() удаляет события безвозвратно.
Удаление элемента методом unwrap().
Метод unwrap(); используется для удаления родительского элемента. Wrap — переводиться как обертка, то есть удаляем элемент, который обертывает наш выбранный элемент. На примере все сразу же понятно.
Результирующий код страницы таков:
А теперь не большой тест.
Спасибо за прочтение статьи! Надеюсь, где-то пригодится!
Замена и удаление элементов
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Замена элементов
С помощью методов, описанных в таблице ниже, можно заменить один набор элементов другим:
Методы замены элементовМетод | Описание |
---|---|
replaceWith(HTML), replaceWith(jQuery), replaceWith(HTMLElement[]) | Заменяет элементы, содержащиеся в объекте jQuery, указанным содержимым |
replaceAll(jQuery), replaceAll(HTMLElement[]) | Заменяет элементы, заданные аргументом, элементами, содержащимися в объекте jQuery |
replaceWith(функция) | Выполняет динамическую замену элементов, содержащихся в объекте jQuery, с использованием функции |
Методы replaceWith() и replaceAll() работают одинаковым образом, за исключением того, что объект jQuery и аргумент играют в них противоположные роли. Пример использования обоих методов приведен ниже:
В этом сценарии сначала создается набор элементов, а затем в документе выполняется поиск элемента div, атрибут id которого равен row1, и его первый дочерний элемент заменяется новым содержимым с помощью метода replaceWith() (что в конечном счете приводит к замене элементов, соответствующих астрам, элементами, соответствующими орхидеям). Наконец, с помощью метода replaceAll() все элементы img, являющиеся потомками элемента, атрибут id которого равен row2, заменяются изображениями гвоздики.
Вид страницы в окне браузера представлен на рисунке:
Передавая функцию методу replaceWith(), можно выполнять динамическую замену элементов. Аргументы этой функции не передаются, однако переменная this внутри нее ссылается на обрабатываемый элемент. Соответствующий пример приведен ниже:
В этом сценарии мы выполняем замену элементов img на основании значений их атрибутов src. Если этот атрибут элемента img содержит rose, то данный элемент заменяется другим, которому соответствует изображение carnation.png. Если же атрибут src элемента содержит peony, то данный элемент заменяется другим, которому соответствует изображение lily.png. Оба замененных элемента выделяются рамкой красного цвета, чтобы сделать эффект более заметным. Страница в окне браузера показана на рисунке:
Если замена элемента нежелательна, можете просто вернуть его клон. Если не клонировать элемент, то jQuery полностью удалит его из документа. Конечно, этой проблемы можно избежать путем усечения выбранного набора, но такая возможность не всегда имеется.
Удаление элементов
В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM. Краткое описание этой группы методов приведено в таблице ниже:
Методы для удаления элементовМетод | Описание |
---|---|
detach(), detach(селектор) | Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются |
empty() | Удаляет все дочерние узлы каждого из элементов, содержащихся в объекте jQuery |
remove(), remove(селектор) | Удаляет элементы из DOM. По мере удаления элементов связанные с ними данные уничтожаются |
unwrap() | Удаляет родительские элементы каждого из элементов, содержащихся в объекте jQuery |
Пример использования метода remove() для удаления элементов приведен ниже:
В этом сценарии мы выбираем элементы img, атрибуты src которых содержат daffodil и snow, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove():
Оба сценария приводят к одному и тому же результату:
Как показывает мой опыт работы с методом remove(), не все селекторы способны выполнять функцию фильтра. Я рекомендую тщательно тестировать каждый шаг и отдавать предпочтение исходному набору выбранных элементов, если только это возможно.
Удаление элементов с сохранением данных
Метод detach() работает аналогично методу remove() с тем лишь отличием, что связанные с удаляемыми элементами данные сохраняются. О связывании данных с элементами подробно говорится в одной из следующих статей, а на данном этапе вам достаточно знать лишь то, что если планируется последующая вставка удаленных элементов в другое место документа, то обычно предпочтение следует отдавать методу detach().
Пример использования метода detach() приведен ниже:
В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит astor. Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append(). Я стараюсь избегать такого подхода, поскольку использование метода append() без вызова метода detach() дает тот же эффект.
Очистка элементов
Метод empty() удаляет все элементы-потомки и текст из элементов, содержащихся в объекте jQuery. Сами элементы остаются в документе. Соответствующий пример приведен ниже:
В этом сценарии из дочерних элементов элемента с атрибутом id, равным row1, выбирается элемент с индексом, равным 1, и вызывается метод empty(). Чтобы сделать изменение более заметным, соответствующая позиция в документе заключена в красную рамку. Страница в окне браузера показана на рисунке:
Метод unwrap()
Метод unwrap() удаляет родительские элементы для элементов, содержащихся в объекте jQuery. Выбранные элементы становятся дочерними элементами родителей своих бывших родительских элементов. Пример использования метода unwrap() приведен ниже:
В этом сценарии выбираются элементы div, являющиеся потомками элемента с атрибутом id, равным row1, и вызывается метод unwrap(), что приводит к удалению элемента row1, как показано на рисунке:
Изменение расположения на странице элементов, лишенных своих прежних родительских элементов, обусловлено тем, что в определение используемых стилей CSS, обеспечивающих расположение элементов в виде таблицы, входит идентификатор row1.
Удаление, замена и перемещение элементов в jQuery
В данном уроке рассматриваются вопросы манипулирования существующими элементами на странице:
Удаление элементов со страницы
Удаление всего, что находится внутри элемента: empty()
Другими словами, метод empty() удаляем все наследственные элементы и узлы (такие, как текстовые узлы) из каждого элемента, попадающего в набор, оставляя элемент пустым.
В примере удаляется содержимое из двух элементов div :
После выполнения выше приведённого кода содержимое страницы изменится на :
Удаление элемента целиком: remove()
Если метод empty() удаляет всё внутри элемента, то метод remove() удаляет все, включая сам элемент. Например:
после выполнения выше приведённого кода оба элемента div будут удалены со страницы:
Удаление элемента без разрушения его данных: detach()
Метод remove() возвращает объект jQuery, который содержит удалённые элементы. Теоретически, можно удалить какие-нибудь элементы из одного места на странице, а позже снова присоединить их где угодно..
Пример. Следующий скрипт назначает событие jQuery click каждому из двух параграфов на странице. Оба обработчика события просто переключают класс CSS «red» для параграфа, чтобы изменить цвет с красного на чёрный или обратно каждый раз, когда на него нажимают.
Это происходит потому, что вызов метода remove() привёл к удалению обработчика события для первого параграфа, а метод detach() сохранил обработчик события click для второго параграфа.
Далее мы рассмотрим ещё несколько способов переместить элемент.
Удаление родительского элемента: unwrap()
Метод unwrap() удаляет родителя элемента (или родителей набора элементов)из DOM. Элемент займёт место родительского элемента в DOM.
После выполнения выше приведённого кода, содержание страницы примет следующий вид:
Замена элементов
Замена элемента новым содержимым: replaceWith()
Метод replaceWith() позволяет заменять элемент или набор элементов новым содержимым. Вы можете передать замещающий контент в любой из следующих форм:
Ниже приводится пример, который показывает метод replaceWith() в действии. Производится замещение первого параграфа новой строкой HTML, второй параграф замещается объектом элемента, а третий параграф заменяется результатом функции, которая возвращает текущее время:
После выполнения кода содержимое страницы примет вид :
replaceAll() : альтернатива методу replaceWith()
Например, следующие 2 строки кода делают одно и тоже:
Перемещение элементов
Пример воспроизводит описанный процесс. Параграф перемещается из первого div во второй:
После выполнения кода страница примет следующий вид:
А здесь другой способ перемещения элемента:
З-й пример демонстрирует очень полезную технику jQuery — связывание методов. Так как большинство методов jQuery возвращает объекты, то можно вызывать другой метод для возвращаемого объекта. Что в свою очередь приведёт к возвращению следующего объекта jQuery и так далее.
Что произойдёт, если попытаться переместить какой-нибудь контент в более чем один родительский элемент в одно и то же время? Если это сделать, jQuery сначала удалит контент из старого родителя, затем клонирует контент столько раз, сколько нужно и добавит клоны в каждый указанный родительский элемент. Например:
После выполнения выше описанного кода, содержимое страницы будет выглядеть так:
Резюме
Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-removing-replacing-moving-elements/
Перевел: Сергей Фастунов
Урок создан: 11 Августа 2010
Просмотров: 304841
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Руководство по удалению элементов и атрибутов в jQuery
jQuery-метод empty()
jQuery-метод empty() удаляет из DOM все дочерние элементы, а также текстовое содержимое в выбранных элементах.
Согласно спецификации DOM W3C (World Wide Web Consortium), любая строка текста в элементе считается дочерним узлом этого элемента.
jQuery-метод remove()
jQuery-метод remove() удаляет выбранные элементы из DOM, а также все внутри него. В дополнение к самим элементам удаляются все связанные события и данные jQuery, связанные с элементами.
В следующем примере скрипт удалит все элементы
jQuery-метод remove() также может включать селектор в качестве необязательного параметра, который позволяет фильтровать удаляемые элементы. Например, код удаления jQuery DOM предыдущего примера можно переписать следующим образом:
jQuery-метод unwrap()
В следующем примере будет удален родительский элемент элементов
при нажатии кнопки.
jQuery-метод removeAttr()
jQuery-метод removeAttr() удаляет атрибут из выбранных элементов.
Пример ниже удалит атрибут href из элементов при нажатии кнопки.
Похожие посты
Руководство по синтаксису в jQuery
Руководство по методу animate() в jQuery
Руководство по callback-функциям в jQuery
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
.remove()
Удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков)
Если указать selector,тогда будут удалены только те выбранные элементы, которые ему удовлетворяют.
Пример. Кликаем по кнопке и удаляем div:
HTML:
JS:
Связанные уроки:
Создание Photoshoot эффекта с помощью jQuery и CSS
В сегодняшнем уроке мы создадим интересный эффект, который будет напоминать съемку фотоаппаратом.
Эффект движущейся тени в пяти строчках jQuery
Кому не нравятся эффекты движения? Тень, которая сопровождает движущийся объект, придает зрелищности в динамичных сценах во многих фильмах, например в Матрице. Удивительное заключается в том, что сделать подобный эффект можно с помощью пяти строчек кода jQuery!
Удаление, замена и перемещение элементов в jQuery
Удаление, замена и перемещение контента являются фундаментальными концепциями, которые позволяют строить замечательные сайты на основе jQuery.
Округленная галерея изображений
В данном уроке мы создадим округленную галерею изображений, которая выводит ваши картинки уникальным способом. Идея заключается в том, чтобы показывать миниатюры альбома в круглом оформлении и обеспечить прокручивание списка миниатюр с помощью курсора мыши.