Как удалить html элемент в js

Element.remove()

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

Синтаксис

remove(); 

Примеры

Использование 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?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

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.

Удаление элементов через JavaScript

Существует несколько методов удаления элементов через JavaScript: традиционный, перебирая элементы и новый — прямой метод DOM4.

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

 
Yggdrasil Explorer
 Yggdrasil is the "WorldTree" of Norse mythology, a cosmos-spanning ash that connects the nine worlds.
 

Если мы хотим удалить описание из DOM, то делаем это следующим образом.

var description = document.getElementById("description"); description.parentNode.removeChild(description);

Минус данного способа уже был упомянут, однако он работает во всех версиях браузеров. Визуально это всё равно, если присвоить описанию display: none через CSS, но в нашем случае элемент будет полностью удалён из DOM.

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

var norsemap = document.getElementById("norsemap"); norsemap.appendChild(description);

Кстати говоря, данную фичу “вырезать и вставить” можно использовать для адаптивного дизайна.

.remove()

В DOM4 есть более новый метод, который можно использовать для решения этой же задачи:

var description = document.getElementById("description"); description.remove();

Тут есть только одна проблема: данный метод не поддерживается всеми браузерами (Chrome & Firefox 23+, Opera 10+, and Safari 7+), и не для всех версий Internet Explorer… и даже IE11. Однако к счастью существуют полифилы DOM4 &DOMShim.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/947/Removing-Elements-With-JavaScript
Перевел: Станислав Протасевич
Урок создан: 19 Августа 2016
Просмотров: 62734
Правила перепечатки

5 последних уроков рубрики «jQuery»

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

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

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

jQuery плагин для создания временной шкалы.

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

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

Как удалить элемент через js?

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

var products = document.querySelectorAll('.product-block'); //обьекты var product_names = document.querySelectorAll('.product-block h5'); //заголовки, которые мы должны вывести var array_product_names = Array.prototype.slice.call(product_names); //Из nodeList в массив var favourite_elements = document.querySelector('.favourite_elements'); //место(блок) где нужно выводить данные //способ определения, какой объект был нажат products.forEach((product, i) => < product.onclick = function() < if (product.style.background != "orange") < product.style.background = "orange"; var favourite_element = array_product_names[i].outerHTML; favourite_elements.insertAdjacentHTML('afterbegin', favourite_element); //добавление элементов >else if (product.style.background == "orange") < //Здесь при повторном нажатии хотел бы удалить соответствующий заголовок из списка вывода. Перепробовал все, не знаю как это решить >> >);

  
Популярные товары
 
 
  
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
   
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
   
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
   
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
   
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
   
 
Смартфон Samsung Galaxy A02s 32GB White
 
59 990 тг.
 
  
 
 
 

Удаление элемента простым JavaScript remove() методом

Как вы знаете, DOM не поддерживает удаления элемента напрямую. При удалении элемента с JavaScript, вы должны сначала перейти на его родителей. Это процесс всегда был странным и не таким простым.

Согласно DOM Уровень 4 функции, который является текущей версией в разработке, существуют новые удобные методы мутации: append(), prepend(), before(), after(), replace(), и remove(). В этой статье, мы сосредоточимся на JavaScript remove() методе.

Пуленепробиваемый путь

Предположим, что у нас есть следующий HTML элемент:

<div >… чтобы удалить его из дерева DOM, вам нужно будет выполнить следующие линии JavaScript’а: 

var elem = document.getElementById("myDiv"); elem.parentNode.removeChild(elem);

Путем jQuery

Если вы используете JavaScript фреймворк, такой как jQuery, тогда для взятия элемента из DOM, вам нужно использовать remove() метод:

$('#myDiv').remove();

Новый путь. FTW. Определив переменную elem, вот как правильно удалить этот узел:

var elem = document.getElementById("myDiv"); elem.remove();

Обратили внимание на сходство с jQuery? Этот новый способ является более простым и интуитивным.

Поддержка браузеров

На данный момент поддерживаются следующие браузеры: Chrome, Opera, Safari и скоро Firefox 23. Может быть это не так здорово для производственных целей, но все же отлично подходит для тестирования и отладки.

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