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

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

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

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

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

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

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

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

   <script> jQuery(document).ready(function($) { $('.element').remove(); }); </script>

   1 2 3 4 5

   <script> jQuery(document).ready(function($) { $('.element').remove(); }); </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

  $('.element'').hide(200);

  1	$('.element'').hide(200);

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

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

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

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

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

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

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