Удаление тега/блока/элемента js все способы
Насколько я понимаю, что существует лишь одна функция, которая предназначена для удаления элементов из дерева {DOM} - это функция remove, но есть еще и outerHTML - какую из функция использовать - это я думаю на вкус и цвет!
Все об удалении тегов/блоков/элементов в javascript
- Как удалить тег/блок/элемент при
загрузке страницы js - Как удалить тег/блок/элемент при
клике по кнопке js - Как удалить тег/блок/элемент при
клике на себя js - Как удалить тег/блок/элемент по его
id js
Вариант 2: Как удалить тег/блок/элемент по егоid js
- Как удалить тег/блок/элемент по
классу - Как удалить тег/блок/элемент по
атрибуту name - Как удалить тег/блок/элемент при
загрузке страницы jquery - Как удалить тег/блок/элемент при
клике по кнопке jquery - Как удалить блок по
классу jquery - Как удалить тег/блок/элемент
при клике на себя jquery - Скачать можно здесь
Как удалить тег/блок/элемент при загрузке страницы js
Что нам потребуется в этом пункте - outerHTML + querySelector
По разным причинам нам нужно бывает удалить блок, прямо в процессе загрузки страницы! Единственная преграда для того, чтобы удалить элемент при загрузки - найти его! Т.е. суметь обратиться к тегу! Не будем описывать какие-то экстремальные примеры удаления элемента при загрузке! Нам нужно понять процесс!
В первом примере давайте используем outerHTML, а во всех следующих уже будем использовать remove
Приступим к удалению!Для удаления блока, нам понадобится собственно блок!
И чтобы вы смогли его увидеть, добавим единицу к тегу и тогда это выглядит так:
Далее нам понадобится скрипт js. Для первого варианта - будем использовать querySelector обратимся к nute таким образом :
Добавим outerHTML со значением ничего:
Результат:
Естественно, что вы ничего не увидели, потому. что блок удалился при загрузке страницы! Чтобы вы смогли увидеть вживую удаление блока, перейдем к следующему пункту!
Как удалить тег/блок/элемент при клике по кнопке js outerHTML
Здесь будем использовать аналогично: outerHTML + querySelector
Всё возьмем из предыдущего пункта функции, будем опять использовать outerHTML и querySelectorТолько теперь нам понадобится кнопка! И конечно же есть несколько способов повесить onclick на кнопку:
Чтобы наш блок отличался, добавим двойку:
Соберем код удаления элемента по тегу вместе:
<newblock2 style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на кнопку</newblock2>
<newblock2 style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на кнопку</newblock2>
Результат: для удаления блока по нажатию кнопки - нажмите по ней!
Как удалить тег/блок/элемент при клике на себя js
В этом пункте будем использовать: [this] + remove
Поскольку вариаций различных много, то самый простой способ, который сразу на поверхности - удаление блока, элемента из дерева {DOM}, onclick - поставим прямо в тег,обратимся к блоку через thisРезультат:
Чтобы удалить блок по нажатию на него, нажмите по ниже идущему элементу:
Как удалить тег/блок/элемент по его id js
В данном пункте будем использовать [getElementById] + remove
Мы можем также обратиться к тегу с помощью querySelector, но есть и функция, которая заточена под id -> GetElementById
Опять нам понадобится какой-то блок, пусть это будет ссылка с ид!
И третья строка - это скрипт, который и удалит наш элемент со страницы:
Соберем весь код вместе:
<a id="example">Данный блок будет удален по ид после нажатия на кнопку!</a>
<button onclick="myFOO()">Удали элемент по id</button>
<script>function myFOO(){document.getElementById("example").remove();}</script>
Результат:
Данный блок будет удален по ид после нажатия на кнопкуВ данном пункте будем использовать только remove
Периодически забываю, что обратиться к тегу можно и по сокращенной схеме, без функций!
Возьмем опять предыдущий код и еег немного уменьшим - ув смысле<a id="example1">Данный блок будет удален по ид после нажатия на кнопку без функции</a>
<button onclick="myFOO1()">Удали элемент по id без функции</button>
<script>function myFOO1(){ example1 .remove();}</script>
Результат:
Данный блок будет удален по ид после нажатия на кнопку без функцииКак удалить тег/блок/элемент если у него есть класс
В данном пункте будем использовать 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>
Результат:
Как удалить тег/блок/элемент при загрузке страницы jquery
Далее будем удалять блок элемент с помощью библиотеки jquery, естественно, что сперва её нужно установить подключить jquery
Для обращения к определенному блоку, у которого есть несколько классов, сделаем так:
Результат:
Естественно, что вы ничего опять не увидели, потому, что данный блок был уже удален при загрузке страницы!
Чтобы увидеть удалении блока в живую, то это следующий пункт
Как удалить тег/блок/элемент при клике по кнопке jquery
Для демонстрации удаления блока-элемента в jquery, нам опять понадобится подопытный блок:
Нам нужна будет кнопка, по нажатию на которую будет удаляться блок:
И скрипт, который и удалит блок со страницы:
Соберем весь код вместе:
<div id="delite" style="border: 1px solid red">Данный блок - элемент будем удалять с помощью jquery</div>
<button id="THE_id">Удали блок по нажатию jquery</button>
<script> $( "#THE_id" ).click(function() { $("#delite").remove(); }); </script>
Результат - нажми по кнопке, чтобы увидеть процесс удаления блока по нажатию!
Как удалить блок по классу jquery
Удаление блока в jquery по классу, аналогично предыдущему пункту! Только вместо решетки ставим точку:
<div class="delite1" style="border: 1px solid red">Данный блок будем удалять по классу jquery</div>
<button id="THE_id1">Удали блок по нажатию jquery</button>
<script> $( "#THE_id1" ).click(function() { $(".delite1").remove(); }); </script>
Результат:
Как удалить тег/блок/элемент при клике на себя jquery
В общем-то уже написали по столько способом удалить блок, что думаю вы уже нашли, что-то вам подходящее и уже на 10 пунтке... активность уменьшается до такого, что уже и не думается!
Ну и как еще... давайте сделаем удаление блока при нажатии на себя, такой вариант:
<div id="delite2" style="border: 1px solid red">Данный блок - элемент будем удалять с помощью jquery</div>
<script> $( "#delite2" ).click(function() { this.remove(); }); </script>
Результат:
Удаление блока по классу и ид.
