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

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

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

<div id="leftcol">
<h1>Yggdrasil Explorer</h1>
<nav> </nav>
<p id="description"> Yggdrasil is the "WorldTree" of Norse mythology, a cosmos-spanning ash that connects the nine worlds.
</div>
<div id="norsemap"> </div>

Если мы хотим удалить описание из 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
Просмотров: 7679
Правила перепечатки


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

  • AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

  • CardInfo.js — отображение банковской карты

    CardInfo.js позволяет по номеру карты получить логотип банка, фирменные цвета и прочие детали. В базе сейчас 49 самых популярных российских банков. Вскоре будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.

  • Работа с Chart.js: Первое знакомство

    Chart.js — это популярный инструмент, который предназначен для создания графиков и диаграмм. В данной серии уроков будут раскрыты все аспекты работы с этой библиотекой.

  • Pointer Events API: обработка тач-событий

    С каждым днём трафик со смартфонов и планшетов неумолимо растёт. К счастью на горизонте показалось новое API, которое обеспечивает как работу мыши, так и тач событий, а также взаимодействия со стилусом.

  • Меняем jQuery Ready() на чистый JavaScript

    Время идёт и меняется подход к различным вещам. С развитием JavaScript и выходом новых библиотек привычные вещи, такие как вызов $(document).ready(function(){}); становятся неактуальны.

^ Наверх ^