Проблема традиционного метода заключается в том, что вы не можете просто удалить элемент, а должны сделать это относительно его родителя.
К примеру у нас есть разметка:
Код
<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
Перевел: Станислав Протасевич
Перевел: Станислав Протасевич