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

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

Платное/бесплатное по JavaScript/jQuery на других сайтах

Большой платный курс по JavaScript/jQuery

Уроки по javascript-фреймворку Angular 4

Премиум уроки по javascript и другим технологиям

Бесплатный курс по ReactJS для новичков

Комментариев: 1
  1. Андрей

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: