Удалить блок из html

Удаление html-элементов в JavaScript

В JavaScript можно создавать элементы с нуля и добавлять их в уже существующую html-разметку (см. статью «Создание html-элементов в JavaScript»). Однако нередко возникает вопрос — а как удалить уже существующие html-элементы? Давайте рассмотрим способы.

Удаление html-элементов методом removeChild()

Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. «удалить ребенка» (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:

Давайте рассмотрим удаление элементов на примере списка:

, а затем удалить дочерний узел с именно этим элементом ( removeChild(this) ). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление методом remove()

По сравнению с removeChild() метод remove() прост и понятен:

Т.е. все, что вам нужно сделать — это обратиться к элементу и вызвать метод remove() . Рассмотрим его также на примере, в котором по клику будут исчезать однотипные html-блоки:

В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.

Исчезающий блок 1

Исчезающий блок 2

Исчезающий блок 3

Исчезающий блок 4

Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox поддержка есть с 23 версии, в Opera — с 15, в Safari — с 7, т.е. примерно с 2012 года. Более полная информация — на сайте caniuse.com:

Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.

Удаление всех элементов внутри родителя

или
с каким-либо id , но удалить все вложенные
. Для этого можно воспользоваться свойством innerHTML или innerText , или же textContent , присвоив в него пустую строку:

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

Переменная node в приведенных примерах — это тот элемент (узел), в котором нужно удалить вложенные (дочерние) элементы.

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

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление элементов в jQuery

В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

Пример с использованием методов jQuery remove() и empty()

Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое .

Текст 1-го абзаца внутри div#myDiv

Текст 2-го абзаца внутри div#myDiv

Текст 3-го абзаца внутри div#myDiv

Метод jQuery elem.detach()

Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать ul между 2-мя блоками, используя метод detach() для удаления списка из первого элемента и метод appendTo() для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах li нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса different .

Источник

Удалить блок из html

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

И чтобы вы смогли его увидеть, добавим единицу к тегу и тогда это выглядит так:

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

Существует несколько вариантов удаления тега! В этом пункте применим [outerHTML]

Ну и далее мы можем собрать весь код удаления тега при загрузке в одном блоке:

Здесь текст блока, который будет удален при загрузке по тегу

Результат удаления тега при загрузке страницы js:

Естественно, что вы ничего не увидели, потому? что блок удалился при загрузке страницы!

Чтобы вы смогли увидеть вживую удаление блока, перейдем к следующему пункту!

Как удалить тег/блок/элемент при клике js

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

Для того, чтобы удалить тег при клике нам понадобится:

Первым пунктом. создадим опять уникальный тег, пусть это будет:

Далее нам нужна кнопка button, на неё повесим onclick + outerHTMLи querySelector. соберем нашу кнопку:

Нам осталось собрать весь код вместе:

Код удаления элемента/тег при клике:

Здесь текст блока, который будет удален при нажатии на кнопку

Результат: для удаления блока по клике!

Чтобы удалить тег — нажмите на кнопку «удали блок кликом»
Здесь текст блока, который будет удален при нажатии на кнопку удали блок кликом

Как удалить тег/блок/элемент при клике на себя js

Предположим, что перед нами стоит задача написать скрипт удаления тега, когда пользователь нажмет по элементу!

Для удаления тега при нажатии на себя нам потребуется:

Любой блок\тег\элемент дерева Dom, пусть это будет div

Что нам еще понадобится?
1). this
2). remove — в этом пункте используем этот метод.
3). Опять же один из вариантов onclick

Далее соберем весь скрипт удаления тега вместе:

Скрипт удаления тега при клике на себя:

Результат удаления тега при клике на себя:

Чтобы удалить блок по нажатию на него, нажмите по ниже идущему элементу:

Как удалить тег/блок/элемент по атрибуту id js

Для того, чтобы удалить блок/тег по атрибуту нам понадобится:

Нам опять понадобится какой-то блок, пусть это будет ссылка с ид!

Одним из способов обратиться к тегу — это обратиться к тегу по его атрибуту! В данном пункте подопытный атрибут будет: id и метод getElementById

Далее нам опять нужна кнопка. button + onclick и вовнутрь поместим функцию. «myFOO()»

далее, как вы уже догадались. нам нужна функция, которая и удалит тег со страницы:

Весь код удаления тега по его атрибуту «id»

Результат удаления тега по его атрибуту «id»

Для того, чтобы удалить тег — нажмите по кнопке «Удали элемент по id»

Удаление тега по его атрибуту id(вариант 2)

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

Итак. для этого пункта нам понадобится:

Опять возьмем какой-то тег, который будем удалять, лишь изменим его атрибут, поскольку он должен быть уникальным:

Выше мы использовали getElementById, но его можно и не использовать. а написать вот таким образом:

Соберем весь код удаления тега по его атрибуту:

Результат удаления тега по его атрибуту:

Как удалить тег/блок/элемент если у него есть класс

В данном пункте будем использовать getElementsByClassName + remove

Для того, чтобы продемонстрировать удаление блока по его классу, нам понадобится блок — элемент с классом:

Чуть изменим клик, добавим к кнопке ид

Повесим теперь клик на ид кнопки(button_id.onclick), внутри функции обратимся к классу с помощью getElementsByClassName и поскольку эта функция нам вернет HTMLCollection, то нам потребуется первое восхождение класса — будет ячейка [0]

button_id.onclick = function myFOO2()

Как удалить тег/блок/элемент по атрибуту name

В данном пункте будем использовать getElementsByName + remove

Следующее — мы удалим блок по его атрибуту name, нам понадобится такой блок — элемент:

Опять же кнопка с ид, по которой будем нажимать для удаления блока по его атрибуту name

Ну и скрипт, аналогичный, как удаление блока по классу! Функция getElementsByName возвращает коллекцию , поэтому обратимся к первому элементу по счету [0] и добавим к этому всему remove

button_id1.onclick = function myFOO3()

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

Источник

Element.remove()

Метод Element.remove() удаляет элемент из DOM-дерева, в котором он находится.

Синтаксис

Примеры

Использование remove()

div id="div-01">Это div-01div> div id="div-02">Это div-02div> div id="div-03">Это div-03div> 

var el = document.getElementById('div-02'); el.remove(); // Удалит элемент div с идентификатором 'div-02' 

Область видимости Element.remove() нерасширяема

Метод remove() не работает с оператором with . Подробнее читайте в справке по Symbol.unscopables .

with(node)  remove(); > // ReferenceError: remove is not defined 

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Удалить блок из html

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

AJAX и PHP: загрузка файла

Stimed — стили в зависимости от времени суток

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

Источник

Удалить блок из html

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

AJAX и PHP: загрузка файла

Stimed — стили в зависимости от времени суток

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

Источник