Удалить элемент dom, не зная его родителя?
-
05-07-2019 - |
Вопрос
Можно ли удалить элемент dom, у которого нет родителя, кроме тега body?Я знаю, что это было бы легко с такой структурой, как jquery, но я стараюсь придерживаться чистого JavaScript.
Вот код, который я нашел, чтобы сделать это иначе:
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
}
Спасибо!
Решение
Вы должны иметь возможность получить родительский элемент, а затем удалить элемент из него.
function removeElement(el) {
el.parentNode.removeChild(el);
}
Обновлять
Вы можете установить это как новый метод HTMLElement:
HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }
А потом сделай el.remove()
(который также вернет элемент)
Другие советы
childDiv.remove();
работает в Chrome 25.0.1364.155
Обратите внимание, что это не работает в IE11 или Opera Mini, но поддерживается всеми другими браузерами.
Глянь сюда: ссылка на childnode-remove на caniuse
Я думаю, ты можешь сделать что-то вроде...
var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);
Видеть node.parentNode для получения дополнительной информации об этом.
document.body.removeChild(child);
Удаление элемента с помощью outerHTML
свойство
remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));
function remElement(obj) {
obj.outerHTML="";
}
Эта функция для простого удаления элемента по идентификатору:
function removeElement (id) {
document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}
Хорошо, вам по сути не нужно знать родителя, чтобы удалить элемент DOM из DOM. Посмотрите на код ниже, посмотрите, каков порядок удаления элемента узла в JavaScript:
Element
+ parentNode
+ removeChild(Element);
Как видите, сначала мы находим элемент, затем используем .parentNode, а затем снова удаляем дочерний элемент, который является элементом, поэтому нам вообще не нужно знать родительский элемент!
Итак, теперь посмотрим настоящий код:
var navigation = document.getElementById('navigation');
if(navigation) {
navigation.parentNode.removeChild(navigation);
}
или как функция
function removeNode(element) {
if(element) { //check if it's not null
element.parentNode.removeChild(element);
}
} //call it like : removeNode(document.getElementById('navigation'));
Также в jQuery есть широко используемая функция удаления(), например:
$('#navigation').remove();
Также есть родной ChildNode.remove()
которого нет в IE и старых браузерах, но вы можете полифилить, посмотрите предложенный полифил от MDN:
Полифилл
Вы можете полифиль метод remove () в Internet Explorer 9 и выше со следующим кодом:
//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
Если вы хотите узнать об этом больше, посетите это связь на МДН.