Как скрыть или удалить элемент со страницы при помощи jQuery

Есть несколько способов как можно удалить или скрыть практически любой элемент (селектор) на странице. Давайте рассмотрим случаи, когда это стоит делать, а когда нет.

Как скрыть HTML элемент при помощи jQuery

Для начала рассмотрим пару примеров, как мы можем скрыть элемент со страницы при помощи обычного CSS:

.my-selector {
opacity: 0;
height: 0;
display: none;
text-indent: -9999px;
}

opacity – отвечает за прозрачность, height – за высоту нашего контейнера, display – за отображение, text-indent – обычно влияет только на отступ текста (в очень редких случаях такой вариант тоже можно применять). Не будем писать про извращения c position: absolute 🙂

В jquery чаще всего используют связки:

<script>
$('.mySelector').hide(); // скрыть селектор
$('.mySelector').show(); // показать 
</script>

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

<script>
$('.mySelector').remove();
</script>

И хотя это не самый лучший вариант, ведь ваша страница сначала прогружается, а только потом скрипт ищет элемент и удаляет его. Будет гораздо лучше, если вы найдете файл, с помощью которого выводится тот или иной кусок кода, например на странице index.html или index.php – но если вы работаете с CMS, то не стоит рассчитывать что все будет так просто 🙂

Как скрыть или показать элемент используя анимацию на jQuery

Можно применять комбинацию fadeIn() и fadeOut(), использовать slideDown() и slideUp(), или же быстрая смена по клику – slideToggle() и fadeToggle(). Соответственно коды для них:

<script>
$(function(){
  $('.mySelector').fadeIn(); //показать
  $('.mySelector').fadeIn(500); //показать за 500 миллисекунд (пол секунды)
  $('.mySelector').fadeOut(); //скрыть

  $('.mySelector').slideUp(); //показать
  $('.mySelector').slideDown(); //скрыть

  $('.mySelector').fadeToggle(); //переключатель исчезновения-появления :)
  $('.mySelector').slideToggle(); //переключатель эффекта слайда :)
});
</script>

Если вам нужна плавная анимация, можно поставить число в миллисекундах 200, 400, 1200 и т.д. , или фразы в стиле slow, fast – тут уже как удобней, подробней смотрите в документации 🙂 . Ну и если анимация нам не нужна вообще, а она бывает по умолчанию уже задана 600 (если ничего не путаю), то просто ставим 0 – fadeIn(0);

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

Как скрыть элемент использую присвоение классов в jQuery

Один из самых “нормальных” вариантов 🙂 это присваивать временные классы. Кстати говоря, такие классы лучше выделить как-то на фоне остальных, например, мне понравилась идея добавлять приставку .js- как по мне, очень удобно.

В самом начале статьи уже рассматривались варианты скрытия на CSS, самый адекватный это:

.js-hidden {
  display: none;
}

и как всегда вся магия jQuery умещается в несколько строк:

$(function(){
  $('.my-selector').click(function(){
    $(this).addClass('js-hidden');
    $(this).removeClass('js-hidden');
    $(this).toggleClass('js-hidden');
  });
});

$(this).addClass(‘js-hidden’); – добавляем класс тому объекту, по которому мы кликнули,
$(this).removeClass(‘js-hidden’); – убираем класс по клику,
$(this).toggleClass(‘js-hidden’); – автоматом убираем или добавляем класс, по очереди.

Обратите внимание, что если вы хотите закрыть “попап” или другой элемент на странице, вам нужно заменить $(this) на свой селектор $(‘.mySelector’), и не забывайте, одну очень важную вещь – прятать нужно не все элементы на странице, а только тот, который относится к текущей кнопке. Да, это означает что вам придется искать родителя, начиная от элемента по которому вы кликнули.

Надеюсь, вы сами разберетесь какие из этих советов можно считать “вредными”, а какие можно смело применять 🙂

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

2 коментаря

  1. Какой эффект он производит? Полностью скрывает элемент со страницы, его не чувствуют другие элемент, как будто его попросту не было.

    1. Да, в большинстве случаев, кроме .remove(), элементам добавляется стиль “display: none;” и они остаются на странице, вы можете их в дальнейшем отобразить в своих скриптах. А вот если используете remove(), то элемент удаляется и дальнейшее добавление возможно уже либо через append(), prepend(), ajax ну или каким-либо другим способом. Зависит от ситуации 🙂

Залишити коментар до Dmitriy Скасувати коментар