Remover elemento DOM sem conhecer seu pai?
-
05-07-2019 - |
Pergunta
É possível remover um elemento DOM que não possui senão a tag-mãe? Eu sei que isso seria fácil com um quadro como jQuery, mas eu estou tentando vara para javascript reta.
Aqui está o código que eu encontrei para fazê-lo de outra forma:
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;
}
}
Obrigado!
Solução
Você deve ser capaz de obter o pai do elemento, em seguida, remover o elemento daquela
function removeElement(el) {
el.parentNode.removeChild(el);
}
Atualizar
Você pode definir isso como um novo método na HTMLElement:
HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }
E, em seguida, fazer el.remove()
(que também irá retornar o elemento)
Outras dicas
childDiv.remove();
trabalhos em Chrome 25.0.1364.155
Note que este não funciona no IE11 ou o Opera Mini, mas é suportado por todos os outros navegadores.
Veja aqui: referência a childNode-remove on caniuse
Eu acho que você pode fazer algo como ...
var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);
Consulte node.parentNode para obter mais informações sobre isso.
document.body.removeChild(child);
elemento Remoção usando a propriedade outerHTML
remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));
function remElement(obj) {
obj.outerHTML="";
}
Esta função simplesmente remover um elemento usando id:
function removeElement (id) {
document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}
OK, você basicamente não precisa conhecer o pai para excluir um elemento DOM do DOM, olhada no código abaixo, veja como é a ordem para excluir um elemento de nó em JavaScript:
Element
+ parentNode
+ removeChild(Element);
Como você pode ver, encontramos o elemento em primeiro lugar, em seguida, usando .parentNode e depois remover a criança que é o elemento novo, por isso não precisa saber o pai em tudo!
Então, agora olhar para o código real:
var navigation = document.getElementById('navigation');
if(navigation) {
navigation.parentNode.removeChild(navigation);
}
ou como uma função
function removeNode(element) {
if(element) { //check if it's not null
element.parentNode.removeChild(element);
}
} //call it like : removeNode(document.getElementById('navigation'));
Além disso jQuery tem a função remove () que é amplamente usar, como:
$('#navigation').remove();
Também há ChildNode.remove()
nativa que não é no IE e navegadores antigos, mas você pode polyfill-lo, procure o polyfill sugerido a partir MDN:
Polyfill
Você pode polyfill o método remove () no Internet Explorer 9 e superior com o seguinte código:
//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]);
Se você gostaria de saber mais sobre ele, visite este ligação no MDN.