Удаление элементов через 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
Просмотров: 62857
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.