Удаление тега/блока/элемента javascript все способы
Как удалить тег/блок/элемент javascript, удаление тега/блока/элемента, при загрузке страницы, удалить тег/блок/элемент по нажатию кнопки! В общем максимальное количество вариантов удаления тегов/блоков/элементов дерева Dom.
Все об удалении тегов/блоков/элементов в javascript
- Как удалить тег/блок/элемент при
загрузке страницы js - Как удалить тег/блок/элемент при клике по js
- Как удалить тег/блок/элемент при
клике на себя js - Как удалить тег/блок/элемент по атрибуту
id js
Вариант 2: Как удалить тег/блок/элемент по его id
- Как удалить тег/блок/элемент по
классу - Как удалить тег/блок/элемент по
атрибуту name - Скачать
Как удалить тег/блок/элемент при загрузке страницы js
Для того, чтобы произошло удаление "тега/блока/элемента" при загрузке страницы нам потребуется :
Придумаем какой-то тег ... со стилями, чтобы он отличался от всего окружения - пусть это будет:
И чтобы вы смогли его увидеть, добавим единицу к тегу и тогда это выглядит так:
Любым из доступных способов обратиться к тегу, в этом пункте будем использовать имя тега и функцию querySelector. Естественно, что он должен быть уникальным!
Существует несколько вариантов удаления тега! В этом пункте применим [outerHTML]
Ну и далее мы можем собрать весь код удаления тега при загрузке в одном блоке:
<script>document.querySelector("newblock").outerHTML = "";</script>
Результат удаления тега при загрузке страницы js:
Естественно, что вы ничего не увидели, потому? что блок удалился при загрузке страницы!
Чтобы вы смогли увидеть вживую удаление блока, перейдем к следующему пункту!
Как удалить тег/блок/элемент при клике js
Второй пример удаления тега/блока/элемента - будем удалять вживую, чтобы вы смоли воочию увидетиь, как удаляется блок/тег из дерева Dom.
Для того, чтобы удалить тег при клике нам понадобится:
Первым пунктом... создадим опять уникальный тег, пусть это будет:
Далее нам нужна кнопка button, на неё повесим onclick + outerHTMLи querySelector... соберем нашу кнопку:
Нам осталось собрать весь код вместе:
Код удаления элемента/тег при клике:
<newblock2 style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на кнопку</newblock2>
<button onclick="document.querySelector('newblock2 ').outerHTML = ''">удали блок кликом</button>
Результат: для удаления блока по клике!
Чтобы удалить тег - нажмите на кнопку "удали блок кликом"
Как удалить тег/блок/элемент при клике на себя js
Предположим, что перед нами стоит задача написать скрипт удаления тега, когда пользователь нажмет по элементу!
Для удаления тега при нажатии на себя нам потребуется:
Любой блок\тег\элемент дерева Dom, пусть это будет div
Что нам еще понадобится?
1). this
2). remove - в этом пункте используем этот метод...
3). Опять же один из вариантов onclick
Далее соберем весь скрипт удаления тега вместе:
Скрипт удаления тега при клике на себя:
Результат удаления тега при клике на себя:
Чтобы удалить блок по нажатию на него, нажмите по ниже идущему элементу:
Как удалить тег/блок/элемент по атрибуту id js
Для того, чтобы удалить блок/тег по атрибуту нам понадобится:
Нам опять понадобится какой-то блок, пусть это будет ссылка с ид!
Одним из способов обратиться к тегу - это обратиться к тегу по его атрибуту! В данном пункте подопытный атрибут будет: id и метод getElementById
Далее нам опять нужна кнопка...button + onclick и вовнутрь поместим функцию..."myFOO()"
далее, как вы уже догадались... нам нужна функция, которая и удалит тег со страницы:
Соберем весь код вместе:
Весь код удаления тега по его атрибуту "id"
<a id="example">Данный блок будет удален по ид после нажатия на кнопку!</a>
<button onclick="myFOO()">Удали элемент по id</button>
<script>function myFOO(){document.getElementById("example").remove();}</script>
Результат удаления тега по его атрибуту "id"
Для того, чтобы удалить тег - нажмите по кнопке "Удали элемент по id"
Данный тег будет удален по ид после нажатия на кнопкуУдаление тега по его атрибуту id(вариант 2)
Для удаления тега/элемента можно воспользоваться укороченной версией обращения к тегу! Единственное условие, чтобы имя вашего атрибута вдруг не повторило название существующей функции по умолчанию.
Итак... для этого пункта нам понадобится:
Опять возьмем какой-то тег, который будем удалять, лишь изменим его атрибут, поскольку он должен быть уникальным:
Снова создадим кнопку:
Выше мы использовали getElementById, но его можно и не использовать... а написать вот таким образом:
Соберем весь код удаления тега по его атрибуту:
<a id="example1">Данный блок будет удален по ид после нажатия на кнопку без функции</a>
<button onclick="myFOO1()">Удали элемент по id без функции</button>
<script>function myFOO1(){ example1 .remove();}</script>
Результат удаления тега по его атрибуту:
Для того, чтобы удалить тег нажмите по кнопке : "Удали элемент по id без функции"
Как удалить тег/блок/элемент если у него есть класс
В данном пункте будем использовать getElementsByClassName + remove
Для того, чтобы продемонстрировать удаление блока по его классу, нам понадобится блок - элемент с классом:
Чуть изменим клик, добавим к кнопке ид
Повесим теперь клик на ид кнопки(button_id.onclick), внутри функции обратимся к классу с помощью getElementsByClassName и поскольку эта функция нам вернет HTMLCollection, то нам потребуется первое восхождение класса - будет ячейка [0]
Соберем весь код вместе:
<a class="example">Данный блок будет удален по его классу после нажатия на кнопку</a>
<button id="button_id">Удали элемент по id без функции </button>
<script>button_id.onclick = function myFOO2(){ document.getElementsByClassName("example")[0].remove();}</script>
Результат:
Данный блок будет удален по его классу после нажатия на кнопкуКак удалить тег/блок/элемент по атрибуту name
В данном пункте будем использовать getElementsByName + remove
Следующее - мы удалим блок по его атрибуту name, нам понадобится такой блок - элемент:
Опять же кнопка с ид, по которой будем нажимать для удаления блока по его атрибуту {name}
Ну и скрипт, аналогичный, как удаление блока по классу! Функция getElementsByName возвращает коллекцию , поэтому обратимся к первому элементу по счету [0] и добавим к этому всему remove
Соберем весь код вместе:
<input type = "text" name = "inputExample">
<button id="button_id1">Удали элемент по атрибуту name</button>
<script>button_id1.onclick = function myFOO3(){ document.getElementsByName( "inputExample")[0].remove();}</script>
Результат: