Как удалить блок js все способы

Поддержи проект!!!

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

Насколько я понимаю, что существует лишь одна функция, которая предназначена для удаления элементов из дерева DOM - это функция remove, но есть еще и outerHTML - какую из функция использовать - это я думаю на вкус и цвет!

Все об удалении блоков в javascript

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

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

Что нам потребуется в этом пункте - outerHTML + querySelector

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

В первом примере давайте используем outerHTML, а во всех следующих уже будем использовать remove

Приступим к удалению!

Для удаления блока, нам понадобится собственно блок!

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

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

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

Далее нам понадобится скрипт js. Для первого варианта - будем использовать querySelector обратимся к nute таким образом :

document.querySelector("newblock")

Добавим outerHTML со значением ничего:

<script>document.querySelector("newblock").outerHTML = "";</script>

Результат:

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

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

Как удалить блок, тег при клике по кнопке js outerHTML

Здесь будем использовать аналогично: outerHTML + querySelector

Всё возьмем из предыдущего пункта функции, будем опять использовать outerHTML и querySelector

Только теперь нам понадобится кнопка! И конечно же есть несколько способов повесить onclick на кнопку:

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

Чтобы наш блок отличался, добавим двойку:

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

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

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

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

Результат: для удаления блока по нажатию кнопки - нажмите по ней!

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

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

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

Поскольку вариаций различных много, то самый простой способ, который сразу на поверхности - удаление блока, элемента из дерева DOM, onclick - поставим прямо в тег,обратимся к блоку через this
<div onclick="this.remove('')" style="border:1px solid red;">Здесь текст блока, который будет удален при нажатии на себя </div>

Результат:

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

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

Как удалить блок, тег по его id js

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

Мы можем также обратиться к тегу с помощью querySelector, но есть и функция, которая заточена под id -> GetElementById

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

<a id="example">Данный блок будет удален по ид после нажатия на кнопку!</a>
Поскольку мы обещали разные варианты, теперь в onclick засандалим функцию myFOO()

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

И третья строка - это скрипт, который и удалит наш элемент со страницы:

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

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

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

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

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

Результат:

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

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

Периодически забываю, что обратиться к тегу можно и по сокращенной схеме, без функций!

Возьмем опять предыдущий код и еег немного уменьшим - ув смысле document.getElementById - просто уберем!


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

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

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

Результат:

Данный блок будет удален по ид после нажатия на кнопку без функции
Удали элемент по 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

Как удалить блок, тег при загрузке страницы jquery

Далее будем удалять блок элемент с помощью библиотеки jquery, естественно, что сперва её нужно установить подключить jquery

<li class="start red">Блок, который будет удаляться при загрузке jquery </li>

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

<script>$("li.start.red").remove();</script>

Результат:

Блок, который будет удаляться при загрузке 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>

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

<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

Как удалить блок по классу 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
Удали блок по нажатию jquery

Как удалить блок, тег при клике на себя jquery

В общем-то уже написали по столько способом удалить блок, что думаю вы уже нашли, что-то вам подходящее и уже на 10 пунтке... активность уменьшается до такого, что уже и не думается!

Ну и как еще... давайте сделаем удаление блока при нажатии на себя, такой вариант:

<div id="delite2" style="border: 1px solid red">Данный блок - элемент будем удалять с помощью jquery</div>

<script> $( "#delite2" ).click(function() { this.remove(); }); </script>

Результат:

Данный блок - элемент будем удалять с помощью jquery

---

Вас может еще заинтересовать список тем : #JS | #JS_JQUERY | #JS_CLASS |

---

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

Теги:
Удаление блока по классу и ид.