Supprimer l'élément dom sans connaître son parent?

Question

Est-il possible de supprimer un élément dom qui n'a pas d'autre parent que l'étiquette de corps? Je sais que ce serait facile avec un framework comme jquery, mais j'essaye de m'en tenir au javascript direct.

Voici le code que j'ai trouvé de le faire autrement:

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; 
    } 
} 

Merci!

Answer 1

Vous devriez être en mesure d'obtenir le parent de l'élément, puis retirer l'élément qui

function removeElement(el) { 
el.parentNode.removeChild(el); 
} 

Mise à jour

Vous pouvez définir cela comme une nouvelle méthode sur la HTMLElement :

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; } 

Ensuite, faites el.remove() (qui renvoient également l'élément)

Answer 2

document.body.removeChild(child); 

Answer 3

Je pense que vous pouvez faire quelque chose comme ...

var child = document.getElementById(childDiv); 
//var parent = document.getElementById(parentDiv); 
child.parentNode.removeChild(child); 

Voir node.parentNode pour plus d'informations sur ce sujet.

Answer 4

childDiv.remove(); 

œuvres dans Chrome 25.0.1364.155

Notez que cela ne fonctionne pas dans IE11 ou Opera Mini, mais est pris en charge par tous les autres navigateurs.

Voir ici: reference to childnode-remove on caniuse

Answer 5

Suppression élément en utilisant la propriété outerHTML

remElement(document.getElementById('title')); 
remElement(document.getElementById('alpha')); 

function remElement(obj) { 
obj.outerHTML=""; 
} 

Answer 6

Cette fonction pour supprimer simplement un élément à l'aide id:

function removeElement (id) { 
    document.getElementById(id).parentElement.removeChild(document.getElementById(id)); 
} 

Answer 7

OK, vous ne devez pas fondamentalement connaître le parent pour supprimer un élément DOM de DOM, regardez le code ci-dessous, voir comment est l'ordre de supprimer un élément de noeud dans JavaScript:

Element + parentNode + removeChild(Element);

Comme vous le voyez, nous trouvons l'élément premier, puis à l'aide .parentNode puis retirez l'enfant qui est à nouveau l'élément, donc on n'a pas besoin de connaître le parent du tout!

Alors regardez maintenant le code réel:

var navigation = document.getElementById('navigation'); 
if(navigation) { 
    navigation.parentNode.removeChild(navigation); 
} 

ou en fonction

function removeNode(element) { 
    if(element) { //check if it's not null 
    element.parentNode.removeChild(element); 
    } 
} //call it like : removeNode(document.getElementById('navigation')); 

également la fonction jQuery a remove() qui est largement utilisé, comme:

$('#navigation').remove(); 

En outre, il est ChildNode.remove() natif qui n'est pas dans IE et les anciens navigateurs, mais vous pouvez le polyfill, regardez le su ggested polyfill de MDN:

Polyfill
Vous pouvez Polyfill la méthode remove dans Internet Explorer 9 et plus avec le code suivant():

//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]); 

Si vous aimez apprendre plus à ce sujet, visitez ce link sur MDN.