Как в jquery удалить элемент из html-разметки

Всем привет. Сегодня я поделюсь с вами тем, как в jquery удалить элемент со страницы. Интересно, что это можно сделать и с помощью css, но в этом случае обычно мы просто делаем элемент невидимым, с помощью скрипта же можно вовсе его удалить со страницы.

Используйте метод remove

У меня с прошлого урока остался блок. Если у вас нет, то создайте его в html, задайте какую-нибудь ширину, высоту, короче, сделайте видимым. Теперь наша цель сделать так, чтобы при клике на него он исчезал со страницы, давайте так и сделаем. Для этого напишем простую функцию.

function remove(){
	$('.block1').remove();
}

Метод remove() не требует дополнительных параметров. Чтобы обращение к нашему элементу произошло, ему требуется дописать стилевой класс .block1, по которому мы и ищем элемент в функции.

Связываем с событием

Теперь осталось в html дописать атрибут onclick и указать, какая функция должна выполняться при каком действии. Пусть будет при клике. Итак, при клике на элемент он должен исчезнуть.

<div class = "block1" onclick = "remove()"></div>

Проверяем и убеждаемся, что это действительно так.

Второй способ

Второй метод, который действует аналогично первому – detach(). Соответственно, код функции будет примерно таким же:

function detach(){
	$('.block1').detach();
}

Результат абсолютно такой же.

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

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

function hide(){
	$('.block1').hide('1s');
}

Как видим, это метод hide(). У него есть два необязательных параметра. Первый, это время, за которое произойдет скрытие. Если не указывать, то это произойдет резко. Второй параметр – имя функции, которая выполнится после завершения работы метода. Соответственно, чем больше время, тем плавнее и медленее будет скрываться элемент.

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Итак, используйте любой из этих методов, какой вам большен всего понравился. Я напомню, что hide() не удаляет блок, а лишь делает его невидимым.

Комментариев: 2
  1. Василиса

    Вы ничего не напутали? «удалить элемент из html-разметки»??? Ошибки нет?

    function remove (){

    $('.block1').remove ();// Предлагаете элемент по которому кликнули искать?! smile

    }

    Может, как-то проще решим?

  2. Андрей

    А как раскрыть элемент после метода hide ()? Например , есть список при клике на один из списков оно скрывается в кнопку button при нажатии на кнопку чтобы раскрывался список

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