Как удалить элемент со страницы средствами 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.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы 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?
Рассмотрим как при помощи jquery удалить элемент на сайте. Такая необходимость возникает довольно часто. Ранее я писала статью о том как скрыть элемент с помощью CSS, однако этот способ просто делает элемент невидимым, а не удаляет его и не всегда подходит.
Навигация по статье:
- Как удалить элемент jquery при помощи remove?
- Использование detach чтобы удалить элемент jquery
- Как удалить элемент jquery при помощи hide?
- Скрыть или удалить элемент jquery плавно
- Удалить элемент jquery по щелчку
Чтобы удалить элемент нам понадобится библиотека jquery.
Как удалить элемент jquery при помощи remove?
- 1. Вычисляем класс или идентификатор элемента, который нужно удалить.
Как это сделать описано в этой статье: «Как определить ID и класс элемента на странице?»
jQuery ( document ) . ready ( function ( $ ) <
$ ( '.element' ) . remove ( ) ;
Вместо .element нужно указать класс или идентификатор вашего элемента.
Напомню, что для класса мы используем точку перед названием, а для идентификатора символ #.
После добавления этого кода указанный элемент будет удалён из потока в сразу после загрузки страницы. Выглядеть будет так как будто бы там его никогда и не было.
Использование detach чтобы удалить элемент jquery
Алгоритм использования этого метода jquery абсолютно такой же как и для remove, только код будет немного отличаться. Вместо remove пишем detach:
jQuery ( document ) . ready ( function ( $ ) < $ ( '.element' ) . detach ( ) ;
Результат работы будет абсолютно таким же как в предыдущем случает.
В чём же тогда разница между удалением при помощи remove и detach? Основное различие заключается в том что удалить элемент при помощи detach, а в дальнейшем возникнет необходмость его вернуть (например, при клике на какую то кнопку) то он вернётся в том виде, в котором был до удаления, со всеми данными и обработчиками событий. Если его удалить с помощью remove, а затем восстановит, то обработчики событий не восстановятся.
Как удалить элемент jquery при помощи hide?
Чтобы удалить элемент jquery кроме remove и detach мы можем использовать метод hide.
В этом случае код будет выглядеть так:
Как удалить элемент с помощью JavaScript
Веб технологии, на сегодняшний день, развиваются как никогда стремительно, а вместе с ними растут требования пользователей и сложность сайтов. Статический HTML сайт уже считается чем-то очень древним и неинтересным, современный пользователь требует интерактивности. А интерактивность в свою очередь, технически означает манипуляции HTML элементами в дереве DOM.
В этой статье рассмотрим, как можно удалить элемент и какие для этого есть варианты. Предположим, что у нас есть такой элемент, который нужно удалить со страницы:
Element to removeУдаление элемента с jQuery
Библиотека jQuery была очень популярна в свое время и даже по сей день активно используется многими веб разработчиками. Если сайт на WordPress, то там с большой вероятностью используется jQuery.
И так, если вы используете jQuery, то, для удаления элемента, можно применить метод remove() :
$('#my-element').remove();Все, крайне просто. Вы выбираете нужный элемент, в данном случае это элемент с id=»my-element» и используете метод remove() .
Старый метод
Надежный способ удаления элемента со страницы, который точно работает если вы используете стандарт ES5 и поддерживается всеми браузерами даже включая самый старый Internet Explorer, следующий:
var elementToRemove = document.getElementById('my-element');
elementToRemove.parentNode.removeChild(elementToRemove);Хитрость тут состоит в том, что сначала выбирается нужный элемент, потом происходит переход на его родителя, а уже потом из родителя он удаляется.
Новый метод
Он состоит в том, чтобы использовать метод remove() , который появился в новом стандарте DOM и не поддерживается старыми браузерами.
const elementToRemove = document.getElementById('my-element');
elementToRemove.remove();Как и прежде для начала нужно выбрать элемент для удаления, а затем просто применить метод remove() .
На этом все, это были три способа удалить элемент с помощью JavaScript.