Удаление тега/блока/элемента javascript все способы

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

Все об удалении тегов/блоков/элементов в javascript

1. Как удалить тег/блок/элемент при загрузке страницы js
2. Как удалить тег/блок/элемент при клике по js
3. Как удалить тег/блок/элемент при клике на себя js
4. Как удалить тег/блок/элемент по атрибуту id js
   Вариант 2: Как удалить тег/блок/элемент по его id
   
5. Как удалить тег/блок/элемент по классу
6. Как удалить тег/блок/элемент по атрибуту name
7. Скачать

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

Для того, чтобы произошло удаление "тега/блока/элемента" при загрузке страницы нам потребуется :

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

<newblock style="border:1px solid red;">Здесь текст блока, который будет удален при загрузке по тегу</newblock>

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

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

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

document.querySelector("newblock")

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

document.querySelector("newblock").outerHTML = "";

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

<newblock style="border:1px solid red;">Здесь текст блока, который будет удален при загрузке по тегу</newblock>
<script>document.querySelector("newblock").outerHTML = "";</script>

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

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

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

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




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

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

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

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

<newblock2 style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на кнопку</newblock2>

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

<button onclick="document.querySelector('newblock2 ').outerHTML = ''">удали блок кликом</button>

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

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

<newblock2 style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на кнопку</newblock2>

<button onclick="document.querySelector('newblock2 ').outerHTML = ''">удали блок кликом</button>

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

Чтобы удалить тег - нажмите на кнопку "удали блок кликом"

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



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

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

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

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

<div>div</div>

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

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

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

<div onclick="this.remove('')" style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на себя </div>

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

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

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



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

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

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

<a id="example">Данный тег будет удален по ид после нажатия на кнопку!</a>

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

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

<button onclick="myFOO()">Удали элемент по id</button>

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

<script>function myFOO(){document.getElementById("example").remove();}</script>

Соберем весь код вместе:

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

<a id="example">Данный блок будет удален по ид после нажатия на кнопку!</a>

<button onclick="myFOO()">Удали элемент по id</button>

<script>function myFOO(){document.getElementById("example").remove();}</script>

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

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

Данный тег будет удален по ид после нажатия на кнопку
Удали элемент по id



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

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

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

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

<a id="example1">Данный блок будет удален по ид после нажатия на кнопку без функции</a>

Снова создадим кнопку:

<button onclick="myFOO1()">Удали элемент по id без функции</button>

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

example1 .remove();

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

<a id="example1">Данный блок будет удален по ид после нажатия на кнопку без функции</a>

<button onclick="myFOO1()">Удали элемент по id без функции</button>

<script>function myFOO1(){ example1 .remove();}</script>

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

Для того, чтобы удалить тег нажмите по кнопке : "Удали элемент по id без функции"

Данный блок будет удален по ид после нажатия на кнопку без функции
Удали элемент по id без функции



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

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

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

<a class="example">Данный блок будет удален по его классу после нажатия на кнопку</a>

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

<button id="button_id">Удали элемент по id без функции </button>

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

<script>button_id.onclick = function myFOO2(){ document.getElementsByClassName("example")[0].remove();}</script>

Соберем весь код вместе:

<a class="example">Данный блок будет удален по его классу после нажатия на кнопку</a>

<button id="button_id">Удали элемент по id без функции </button>

<script>button_id.onclick = function myFOO2(){ document.getElementsByClassName("example")[0].remove();}</script>

Результат:

Данный блок будет удален по его классу после нажатия на кнопку
Удали элемент по id без функции



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

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

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

<input type = "text" name = "inputExample">

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

<button id="button_id1">Удали элемент по атрибуту name</button>

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

<script>button_id1.onclick = function myFOO3(){ document.getElementsByName( "inputExample")[0].remove();}</script>

Соберем весь код вместе:

<input type = "text" name = "inputExample">

<button id="button_id1">Удали элемент по атрибуту name</button>

<script>button_id1.onclick = function myFOO3(){ document.getElementsByName( "inputExample")[0].remove();}</script>

Результат:

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