Есть несколько способов как можно удалить или скрыть практически любой элемент (селектор) на странице. Давайте рассмотрим случаи, когда это стоит делать, а когда нет.
Как скрыть 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’), и не забывайте, одну очень важную вещь – прятать нужно не все элементы на странице, а только тот, который относится к текущей кнопке. Да, это означает что вам придется искать родителя, начиная от элемента по которому вы кликнули.
Надеюсь, вы сами разберетесь какие из этих советов можно считать “вредными”, а какие можно смело применять 🙂
Какой эффект он производит? Полностью скрывает элемент со страницы, его не чувствуют другие элемент, как будто его попросту не было.
Да, в большинстве случаев, кроме .remove(), элементам добавляется стиль “display: none;” и они остаются на странице, вы можете их в дальнейшем отобразить в своих скриптах. А вот если используете remove(), то элемент удаляется и дальнейшее добавление возможно уже либо через append(), prepend(), ajax ну или каким-либо другим способом. Зависит от ситуации 🙂