Как удалить html элемент jquery

Как удалить элемент со страницы средствами jQuery или JS?

Пытаюсь удалить div.fox-copyright со страницы со всем его содержимым — пробовал использовать методы jquery — remove(), detach() и empty(), но ничего не работает. Почему так? Как удалить элемент div.fox-copyright и все его содержимое?

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 5 ноя 2014 в 11:58

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

$('.fox-copyright').remove(); 

И копирайты прятать не хорошо :3

Отслеживать
ответ дан 5 ноя 2014 в 12:08
1,134 8 8 серебряных знаков 13 13 бронзовых знаков
Прятать, это если в css задать display: none; это нехорошо, а вот удалять норм.
5 ноя 2014 в 12:30

$(‘.fox-copyright’).remove(); — почему-то не удаляет хтмл код со страницы, хотя в консоли ошибок нет.

5 ноя 2014 в 12:46
@eprivalov1 в примере ведь удаляет. 🙂 jQuery точно подключен?
5 ноя 2014 в 12:49

@Bastian jQuery 100% включен, я уже удалил html код из вывода в PHP файле. С помощью jQuery и JavaScript никак не получается удалить. Видимо, автор плагина что-то нашаманил, чтоб ссылки не удаляли.

5 ноя 2014 в 13:10

@eprivalov1, автор ничего не шаманил. html-код страницы (то, что вы видите, когда нажимаете «Посмотреть код страницы») это то, что пришло с сервера. DOM-дерево (document object model) — то, что вы видите в консоли браузера, это совсем другая степь. С помощью jquery, javascript-a вы манипулируете DOM-деревом, а не кодом страницы.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 5 ноя 2014 в 17:00
3,065 12 12 серебряных знаков 19 19 бронзовых знаков

• jquery
• javascript

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Замена и удаление элементов

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

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

С помощью методов, описанных в таблице ниже, можно заменить один набор элементов другим:

Методы замены элементов

Метод	Описание
replaceWith(HTML), replaceWith(jQuery), replaceWith(HTMLElement[])	Заменяет элементы, содержащиеся в объекте jQuery, указанным содержимым
replaceAll(jQuery), replaceAll(HTMLElement[])	Заменяет элементы, заданные аргументом, элементами, содержащимися в объекте jQuery
replaceWith(функция)	Выполняет динамическую замену элементов, содержащихся в объекте jQuery, с использованием функции

Методы replaceWith() и replaceAll() работают одинаковым образом, за исключением того, что объект jQuery и аргумент играют в них противоположные роли. Пример использования обоих методов приведен ниже:

$(function() < var newElems= $("") .append("") .append("Орхидея:") .append("") .css("border", "thick solid red"); $('#row1').children().first().replaceWith(newElems); $("").replaceAll('#row2 img') >);

В этом сценарии сначала создается набор элементов, а затем в документе выполняется поиск элемента div, атрибут id которого равен row1, и его первый дочерний элемент заменяется новым содержимым с помощью метода replaceWith() (что в конечном счете приводит к замене элементов, соответствующих астрам, элементами, соответствующими орхидеям). Наконец, с помощью метода replaceAll() все элементы img, являющиеся потомками элемента, атрибут id которого равен row2, заменяются изображениями гвоздики.

Вид страницы в окне браузера представлен на рисунке:

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

$(function() < $('div.drow img').replaceWith(function() < if (this.src.indexOf("rose") >-1) < return $("").css("border", "thick solid red"); > else if (this.src.indexOf("peony") > -1) < return $("").css("border", "thick solid red"); > else < return $(this).clone(); >>); >);

В этом сценарии мы выполняем замену элементов img на основании значений их атрибутов src. Если этот атрибут элемента img содержит rose, то данный элемент заменяется другим, которому соответствует изображение carnation.png. Если же атрибут src элемента содержит peony, то данный элемент заменяется другим, которому соответствует изображение lily.png. Оба замененных элемента выделяются рамкой красного цвета, чтобы сделать эффект более заметным. Страница в окне браузера показана на рисунке:

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

Удаление элементов

В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM. Краткое описание этой группы методов приведено в таблице ниже:

Методы для удаления элементов

Метод	Описание
detach(), detach(селектор)	Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются
empty()	Удаляет все дочерние узлы каждого из элементов, содержащихся в объекте jQuery
remove(), remove(селектор)	Удаляет элементы из DOM. По мере удаления элементов связанные с ними данные уничтожаются
unwrap()	Удаляет родительские элементы каждого из элементов, содержащихся в объекте jQuery

Пример использования метода remove() для удаления элементов приведен ниже:

$(function() < $('img[src*=daffodil], img[src*=snow]').parent().remove(); >);

В этом сценарии мы выбираем элементы img, атрибуты src которых содержат daffodil и snow, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove():

$(function() < $('div.dcell').remove(':has(img[src*=snow], img[src*=daffodil])'); >);

Оба сценария приводят к одному и тому же результату:

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

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

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

Пример использования метода detach() приведен ниже:

$(function() < $('#row2').append($('img[src*=astor]').parent().detach()); >);

В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит astor. Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append(). Я стараюсь избегать такого подхода, поскольку использование метода append() без вызова метода detach() дает тот же эффект.

Очистка элементов

Метод empty() удаляет все элементы-потомки и текст из элементов, содержащихся в объекте jQuery. Сами элементы остаются в документе. Соответствующий пример приведен ниже:

$(function() < $('#row1').children().eq(1).empty().css("border", "thick solid red"); >);

В этом сценарии из дочерних элементов элемента с атрибутом id, равным row1, выбирается элемент с индексом, равным 1, и вызывается метод empty(). Чтобы сделать изменение более заметным, соответствующая позиция в документе заключена в красную рамку. Страница в окне браузера показана на рисунке:

Метод unwrap()

Метод unwrap() удаляет родительские элементы для элементов, содержащихся в объекте jQuery. Выбранные элементы становятся дочерними элементами родителей своих бывших родительских элементов. Пример использования метода unwrap() приведен ниже:

$(function() < $('#row1 div').unwrap().css('display','block'); >);

В этом сценарии выбираются элементы div, являющиеся потомками элемента с атрибутом id, равным row1, и вызывается метод unwrap(), что приводит к удалению элемента row1, как показано на рисунке:

Изменение расположения на странице элементов, лишенных своих прежних родительских элементов, обусловлено тем, что в определение используемых стилей CSS, обеспечивающих расположение элементов в виде таблицы, входит идентификатор row1.

jQuery — удаление элемента

Удаление элементов можно выполнить с помощь следующих четырех методов:

Рассмотрим каждый из методов подробно. В конце каждого метода предлагается сделать не большое задание для закрепления материала.

Удаление элемента методом empty().

Метод empty() — удаляет все внутренности соответствующему элементу. Элемент после обработки данным методом остается пустым. Рассмотрим на примере

     
Текст-1
 
Текст-2
 
Текст-3
 
   

После выполнения функции delFunc(); удаляются все три параграфа (

Текст-1

Текст-2

Текст-3

) и получаем следующий код страницы.

Удаление элемента методом remove().

Метод remove() более мощный, он удаляет не только дочерние элементы внутри найденного, но и сам элемент. В этом его главное отличие от метода empty().

     
Текст-1
 
Текст-2
 
Текст-3
 
   

При выполнении функции delFunc(); получим следующий результат:

Удаление элемента методом detach().

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

Метод remove() удаляет события безвозвратно.

   p.alarm    
Text-1
 
  

В пример мы сначала методом .detach(); удалили элемент и событие click, к нему привязанное, а методом appendTo(); восстановили. Проведите эксперимент — замените .detach() на remove(). Можно ли будет по клику на параграф менять ему класс?

Удаление элемента методом unwrap().

Метод unwrap(); используется для удаления родительского элемента. Wrap — переводиться как обертка, то есть удаляем элемент, который обертывает наш выбранный элемент. На примере все сразу же понятно.

     
Text-1
 
Text-2
 
Text-3
 
   

Результирующий код страницы таков:

 
Text-1
 
Text-2
 
Text-3
  

А теперь не большой тест.

Спасибо за прочтение статьи! Надеюсь, где-то пригодится!

Создание, добавление и удаление элементов в jQuery

В этом уроке мы рассмотрим два варианта создания элементов в jQuery, и методы, предназначенные для добавления элементов на страницу, удаления, клонирования, замены одних элементов на другие, и перемещение элементов.

Как создать элемент в jQuery?

Создание элементов в jQuery осуществляется посредством передачи HTML-строки в главную функцию этой библиотеки.

Синтаксис создания элементов из HTML-строки:

jQuery( html [, ownerDocument ] )

Он имеет 2 параметра. Первый ( html ) обязательный. Здесь указывается HTML-строка, на основе которой нужно создать соответствующие элементы. Второй ( ownerDocument ) не обязательный. Он необходим для указания документа, в котором необходимо создать элементы. По умолчанию элементы создаются в том же документе, в который была загружена библиотека jQuery. Если вы хотите внедрить элементы в другой документ, то его явно необходимо указать с помощью этого параметра.

Пример создания элемента из HTML-строки:

$('
Новый текст сообщения.
')

Пример создания элемента не в документе, в который была загружена библиотека jQuery, а в другой #include :

$('
Новый элемент
', $('#include').prop('contentWindow').document)

Пример создания нескольких элементов из HTML-строки:

$('
' + '' + '' + '
')

Созданный элемент не отобразиться на странице, так как мы его только создали. Для того чтобы элемент отобразился на странице его нужно вставить в неё. Как это выполнить рассмотрим ниже.

Этот способ создания элементов можно использовать только в том случае, если вы полностью доверяете источнику. Если же вы не уверены в источнике, из которого берёте HTML данные, то обязательно применяйте поэлементный способ создания нужного фрагмента.

Синтаксис создания HTML элемента:

jQuery( html[, attributes] )

Он имеет 2 параметра. Первый параметр ( html ) является обязательным. В нём указывается строка, описывающая HTML элемент, который необходимо создать. Например, для создания элемента div , она описывается как «» или как » » . Второй параметр ( attributes ) является дополнительным. В нём задаются в формате объекта атрибуты, обработчики событий и методы которые нужно добавить или связать с только что созданным элементом.

Cоздадим элемент используя синтаксис jQuery для создания HTML элемента:

$('
Новый текст сообщения.
') // поэлементное создание HTML-кода представленного строчкой выше $('
', { 'class': 'alert-message', text: 'Новый текст сообщения.' })

Cоздадим HTML фрагмент, используя поэлементый способ создания:

$('
' + '' + '' + '
') // поэлементное создание HTML-кода представленного строчками выше $('
') .append('', { src: 'cat_in_hat.png', alt: 'Кот в шляпе' }) .append('

С методом append познакомимся ниже. Он в этом коде используется, для того чтобы добавить элементы img и figcaption в элемент figure .

Как вставить элементы на страницу

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

Первая группа – это методы, предназначенные для вставки новых элементов внутрь других. К ним относится append, appendTo, prepend, prependTo, html и text.

Метод append

Метод append предназначен для вставки контента в конец каждого элемента набора, к которому он применяется.

Синтаксис метода append (2 варианта):

.append( content [, content ] ) // 1 вариант .append( function ) // 2 вариант

В качестве значения параметр content может принимать DOM-элемент, текстовый узел, массив элементов и текстовых узлов, HTML-строку или объект jQuery.

Метод append (1 вариант) может принимать на вход не один, а любое количество аргументов content . Используется это когда вам нужно вставить не один, а несколько элементов.

Вторая реализация метода append позволяет принимать в качестве аргумента функцию.

Function( Integer index, String html ) => htmlString или Element или Text или jQuery

Функция в результате своего выполнения должна возвращать HTML-строку, элемент(ы) DOM, текстовый узел(ы) или объект jQuery. Другими словами, определять контент, который необходимо вставить в конец каждого элемента текущего набора. В качестве аргументов на вход функция получает индекс текущего элемента в наборе и его HTML код. Внутри функции ключевое слово this указывает на текущий элемент набора.

Пример, в котором с помощью метода append будем добавлять в конец элемента .info новый элемент div , содежащий текущее время:

 Добавить текст   

Метод appendTo

Метод appendTo выполняет ту же задачу, что и метод append . Отличие между ними в основном сводится к синтаксису, а именно в различии мест, в которых нужно размещать контент (что нужно вставить) и цель (куда нужно вставить). В случае с методом append цель предшествует контенту. Контент указывается в круглых скобках этого метода. В методе appendTo наоборот контент предшествует цели.

// target - цель // contentToBeAppeded - контент, который нужно вставить $(target).append(contentToBeInserted) $(contentToBeInserted).appendTo(target)

Синтаксис метода appendTo:

.appendTo( target )

Параметр target является обязательным. В качестве значения он может принимать селектор, DOM-элемент, HTML-строку, массив элементов или объект jQuery. Этот параметр определяет цель, в которую будет вставлен соответствующий набор элементов.

Пример, в котором рассмотрим как с помощью метода append можно добавить элемент внутрь каждого элемента li :

• .
• .

Методы prepend и prependTo

Методы prepend и prependTo полностью аналогичны методам append и appendTo . Но, в отличие от них они вставляют новые элементы не в конец других элементов, а в их начало (т.е. перед всеми элементами расположенными в каждом из них).

Синтаксис метода prepend (2 варианта):

.prepend( content [, content ] ) // 1 вариант .prepend( function ) // 2 вариант

Синтаксис метода prependTo :

.prependTo( target )

Пример, в котором добавим текст «Внимание!» перед содержимым элемента .message :

 
Текст сообщения.
  

Методы text и html

Методы text и html подробно описаны в этой статье. Они применяются, когда нужно установить новое содержимое для каждого элемента текущего набора. Метод text используется, когда требуется установить текстовый контент, а html – когда HTML фрагмент. Кроме этого, данные методы применяются также для получения содержимого элементов.

Вторая группа – это методы, предназначенные для вставки новых элементов за пределами существующих элементов, т.е. перед или после них. К ним относятся after, insertAfter, before и insertBefore.

Метод after

Метод after применяется, когда вам нужно вставить некоторый контент после каждого элемента текущего набора.

Синтаксис метода after (2 варианта):

.after( content [, content ] ) // 1 вариант .after( function ) // 2 вариант

Назначение параметров и данные, которые они могут принимать такие же, как у метода append. Перейти к описанию параметров метода append .

Пример, в котором добавим кнопку «Закрыть» после текста сообщения (элемента .message__text ):

 
Текст сообщения.
 
 

Метод insertAfter

Метод insertAfter выполняет ту же функцию, что и метод after . Их основное отличие заключается в том, что контент (что нужно вставить) и цель (куда нужно вставить) размещены наоборот. Т.е. в after цель располагается перед ним, а контент передаётся как аргумент этого метода (в круглых скобках). В insertAfter цель задаётся как аргумент этого метода (в круглых скобках), а контент указывается перед ним.

// target - цель // contentToBeInserted - контент, который нужно вставить $(target).after(contentToBeInserted) $(contentToBeInserted).insertAfter(target)

Синтаксис метода insertAfter :

.insertAfter( target )

Пример, в котором вставим после каждого элемента p элемент div с текстовым контентом «Это новый элемент»:

.
 
.





 

Методы before и insertBefore

Методы before и insertBefore полностью аналогичны методам after и insertAfter . Но, в отличие от них они вставляют новые элементы не после цели, а перед ней.

Пример, в котором добавим перед всеми элементами p элемент div с текстовым содержимым «Это новый элемент»:

.
 
.
 

Третью группу представляют методы, которые могут применяться, когда вам нужно вставить новый контент таким образом, чтобы он был обернут относительно существующих. К этой группе относятся методы wrap, wrapAll и wrapInner.

Метод wrap

Метод wrap используется, когда вам нужно указанную HTML-структуру обернуть вокруг каждого элемента текущего набора.

Синтаксис метода wrap :

.wrap( wrappingElement ) // 1 вариант .wrap( function ) // 2 вариант

В качестве параметра wrappingElement можно указывать селектор, HTML-строку, DOM-элемент или объект jQuery, определяющий структуру, которая будет оборачивать соответствующие элементы. Когда вы передаете коллекцию jQuery, содержащую более одного элемента, или селектор, соответствующий нескольким элементам, будет использоваться первый элемент.

Во втором варианте реализации метода wrap в качестве аргумента может использоваться функция.

Function( Integer index ) => String или jQuery

Функция должна возвращать в качестве результата HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, которая будет обарачиваться вокруг каждого элемента текущего набора. В качестве аргумента функция получает индекс элемента в наборе. Внутри функции this указавает на текущий элемент в наборе.

Обернём каждый элемент p в текущем наборе вокруг двух элементов div :

.
 
.
 

Метод wrapAll

Метод wrapAll применяется, когда нужно указанную HTML-структуру обернуть вокруг всех элементов текущего набора.

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

HTML-структура может иметь несколько уровней в глубину, но внутренний элемент в ней должен быть только один.

.wrapAll( wrappingElement ) // 1 вариант .wrapAll( function ) // 2 вариант

Параметр wrappingElement может принимать в качестве значения селектор, HTML-строку, DOM-элемент или объект jQuery. Данный параметр задаёт HTML-структуру, которая будет использоваться для оборачивания всех выбранных элементов.

Во втором варианте реализации метода wrapAll в качестве аргумента можно использовать функцию обратного вызова.

Function() => String or jQuery

Данная функция в качестве результата должна возвращать HTML-строку или объект jQuery. Этот результат будет определять HTML-структуру, с помощью которой будут обёрнуты чтобы все текущие элементы. Внутри функции this указывает на первый элемент набора.

Обернём все элементы p вокруг HTML конструкции, состоящей из двух элементов div вложенных друг в друга:

.
 
.
 
.