Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.

CSS

В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.

Спрятать по имени класса (class)

HTML пример

этот блок нужно спрятать

CSS пример

Sidebar {display: none;}

.

Спрятать по id

HTML пример

этот блок нужно спрятать

CSS пример

#sidebar {display: none;}

Код выше скроет все элементы на странице с .

Спрятать по другим атрибутам

В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.

HTML пример

Ссылка

CSS пример

Container div:nth-child(2) {display: none} .

Container div:nth-child(2) спрячет второй div внутри блока.container.

div спрячет все div элементы со страницы, у которых есть data-id атрибуты со значением "hello-world" , если указать так , то это будет скрыты не только div элементы, но уже все элементы будут проверены на наличие такого атрибута и значения.

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

Sidebar { display: none; opacity: 0; z-index: -999; visibility: hidden; width: 0; height: 0; position: absolute; left: -9999; top: -9999; }

Описание CSS свойств из примера выше

opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.

z-index: -999 — устанавливает расположение слоя. Чем выше цифра, тем элемент, который вы хотите спрятать будет находиться выше других слоев. Например, если у слоя.sidebar стоит z-index: 999, а у.container стоит z-index: 100, то даже если поставить эти слои друг на друга, .sidebar все равно будет отображаться выше.container, так как index у него стоит выше.

visibility: hidden — схожее свойство с display: none

width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.

position: absolute; left: -9999; top: -9999 — в данном случае, элемент переместиться за пределы экрана пользователя, тем самым не будет виден на странице

jQuery

Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.

Обращаться к элементам можно таким же образом, как и в CSS. Проблема CSS в том, что с его помощью можно только прятать элементы.

jQuery позволяет удалять элементы, чтобы они не были видны даже при рассмотрении исходного кода страницы.

Удалить элемент с помощью класса (class)

Скрипт ниже удалить все элементы со страницы с классом sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $(".sidebar").remove(); }); });

Удалить элемент с помощью id

Скрипт ниже удалить элемент со страницы с id sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $("#sidebar").remove(); }); });

Удалить элемент по атрибуту

$(function() { $(document).ready(function() { $("a").remove(); }); });

Таким образом можно удалить все что угодно на странице.

JavaScript

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

Удалить элемент с помощью class

HTML пример

Текст

JavaScript пример

document.getElementsByClassName("sidebar").remove()

Работа с Андроидом