web-dev-qa-db-fra.com

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

Est-il possible de supprimer un élément dom qui n'a pas de parent autre que la balise body? Je sais que ce serait facile avec un cadre comme jquery, mais j'essaie de m'en tenir à du javascript simple.

Voici le code que j'ai trouvé pour 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!

javascriptremovechild
36
Matrym

Vous devriez pouvoir obtenir le parent de l'élément, puis supprimer l'élément de celui-ci

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

Mise à jour

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

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

Et puis faites el.remove() (qui retournera également l'élément)

94
Adam Hopkinson
childDiv.remove();

fonctionne 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: référence à childnode-remove sur caniuse

19
swervo

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 à ce sujet.

16
Robert K
document.body.removeChild(child);
5
Gregoire

Suppression d'un élément à l'aide de la propriété outerHTML

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

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

Cette fonction pour simplement supprimer un élément en utilisant id:

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

OK, vous n'avez pas besoin de connaître le parent pour supprimer un élément DOM de DOM, regardez le code ci-dessous, voyez comment est l'ordre de supprimer un élément de nœud en JavaScript:

Element + parentNode + removeChild(Element);

Comme vous le voyez, nous trouvons d'abord l'élément, puis en utilisant .parentNode, puis enlevez à nouveau l'enfant qui est l'élément, nous n'avons donc pas besoin de connaître le parent du tout!

Alors maintenant, regardez le vrai code:

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'));

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

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

Il y a aussi une ChildNode.remove() native qui n'est pas dans IE et les anciens navigateurs, mais vous pouvez le polyfill, regardez le polyfill suggéré depuis MDN:

Polyfill
 Vous pouvez remplir la méthode remove () dans Internet Explorer 9 et versions ultérieures 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 souhaitez en savoir plus, visitez ce lien sur MDN.

1
Alireza