Существует несколько методов удаления элементов через JavaScript: традиционный, перебирая элементы и новый - прямой метод DOM4.
Проблема традиционного метода заключается в том, что вы не можете просто удалить элемент, а должны сделать это относительно его родителя.
К примеру у нас есть разметка:
Если мы хотим удалить описание из DOM, то делаем это следующим образом.
Минус данного способа уже был упомянут, однако он работает во всех версиях браузеров. Визуально это всё равно, если присвоить описанию display: none через CSS, но в нашем случае элемент будет полностью удалён из DOM.
Удалённый элемент остаётся в памяти доступ к нему можно получить следующим образом:
Кстати говоря, данную фичу “вырезать и вставить” можно использовать для адаптивного дизайна.
.remove()
В DOM4 есть более новый метод, который можно использовать для решения этой же задачи:
Тут есть только одна проблема: данный метод не поддерживается всеми браузерами (Chrome & Firefox 23+, Opera 10+, and Safari 7+), и не для всех версий Internet Explorer… и даже IE11. Однако к счастью существуют полифилы DOM4 & DOMShim.
Проблема традиционного метода заключается в том, что вы не можете просто удалить элемент, а должны сделать это относительно его родителя.
К примеру у нас есть разметка:
Код
<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>
<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);
description.parentNode.removeChild(description);
Минус данного способа уже был упомянут, однако он работает во всех версиях браузеров. Визуально это всё равно, если присвоить описанию display: none через CSS, но в нашем случае элемент будет полностью удалён из DOM.
Удалённый элемент остаётся в памяти доступ к нему можно получить следующим образом:
Код
var norsemap = document.getElementById("norsemap");
norsemap.appendChild(description);
norsemap.appendChild(description);
Кстати говоря, данную фичу “вырезать и вставить” можно использовать для адаптивного дизайна.
.remove()
В DOM4 есть более новый метод, который можно использовать для решения этой же задачи:
Код
var description = document.getElementById("description");
description.remove();
description.remove();
Тут есть только одна проблема: данный метод не поддерживается всеми браузерами (Chrome & Firefox 23+, Opera 10+, and Safari 7+), и не для всех версий Internet Explorer… и даже IE11. Однако к счастью существуют полифилы DOM4 & DOMShim.
Данный урок подготовлен для вас командой сайта ruseller.com
Перевел: Станислав Протасевич
Перевел: Станислав Протасевич