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

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

Здравствуйте, дорогие друзья!

Рассмотрим как при помощи jquery удалить элемент на сайте. Такая необходимость возникает довольно часто. Ранее я писала статью о том как скрыть элемент с помощью CSS, однако этот способ просто делает элемент невидимым, а не удаляет его и не всегда подходит.

Чтобы удалить элемент нам понадобится библиотека jquery.

Как удалить элемент jquery при помощи remove?

  1. 1.Вычисляем класс или идентификатор элемента, который нужно удалить.
    Как это сделать описано в этой статье: «Как определить ID и класс элемента на странице?»
  2. 2.Открываем код страницы сайта и в самом конце находим закрывающийся тег </body>.

    Если ваш сайт работает на CMS то вам нужно будет открыть php файл темы оформления или шаблона, который отвечает за формирование нижней части страницы. Обычно он называется footer.php или bottom.php и находится в папке с шаблоном.

  3. 3.Перед закрытием тега </body> вставляем следующий код:

Вместо .element нужно указать класс или идентификатор вашего элемента.

Напомню, что для класса мы используем точку перед названием, а для идентификатора символ #.
После добавления этого кода указанный элемент будет удалён из потока в сразу после загрузки страницы. Выглядеть будет так как будто бы там его никогда и не было.

Использование detach чтобы удалить элемент jquery

Алгоритм использования этого метода jquery абсолютно такой же как и для remove, только код будет немного отличаться. Вместо remove пишем detach:

Результат работы будет абсолютно таким же как в предыдущем случает.

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

Как удалить элемент jquery при помощи hide?

Чтобы удалить элемент jquery кроме remove и detach мы можем использовать метод hide.

В этом случае код будет выглядеть так:

Основным отличием метода является то, что по сути, элемент не удаляется из потока, а скрывается путём добавление в его коде CSS свойства display:none;
Весь его код и привязанные к нему события сохраняются и могут быть при необходимости восстановлены при определённом событии.

Скрыть или удалить элемент jquery плавно

Для этого мы можем задать в скобочках параметр скорости для метода hide.

Можно использовать следующие значения:

  • slow – медленно скрыть элемент
  • fast – быстро
  • указать значение в миллисекундах, например:

Так же вместо hide можно использовать .fadeOut() и .slideUp(). Эффекты при этом будут немного отличаться.

В скобках, так же как и для hide, можно указать параметры скорости.

Удалить элемент jquery по щелчку

В предыдущих примерах удаление происходило сразу после загрузки страницы. Чтобы выполнить удаление по щелчку вместо предложенного выше кода нужно использовать следующую функцию jquery:

Вместо .target-block указываем класс или идентификатор элемента, по щелчку на который должен скрываться наш блок или другой элемент.
Так же вместо события click можно использовать и другие события jquery.


Надеюсь что помогла разобраться вам с тем как удалить элемент jquery. Оставляйте свои комментарии если статья была для вас полезна или у вас возник какой то вопрос.

Успехов вам и процветания!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif