Как в 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() не удаляет блок, а лишь делает его невидимым.