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

Question

Est-il possible de supprimer un élément dom qui n'a d'autre parent que la balise body? Je sais que ce serait facile avec un framework tel que 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!

Answer 1

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

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

Mettre à 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 ensuite el.remove () (qui retournera également l'élément)

Answer 2

childDiv.remove();

fonctionne dans Chrome 25.0.1364.155

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

Voir ici: référence à childnode-remove sur caniuse

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

Answer 4

document.body.removeChild(child);

Answer 5

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

Answer 6

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

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

Answer 7

OK, vous n'avez en principe 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 pour supprimer un élément de noeud en JavaScript:

Elément + parentNode + removeChild (Element);

Comme vous le voyez, nous trouvons d’abord l’élément, puis nous utilisons .parentNode puis retirons l’enfant qui est l’élément. Nous n’avons donc pas besoin de connaître le parent!

Alors maintenant, regardez le vrai code:

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

ou en tant que 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 aussi la fonction remove () qui est très utilisée, comme:

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

Il existe également un ChildNode.remove () natif qui ne figure pas dans IE ni dans les anciens navigateurs, mais vous pouvez le polyfiller, regardez le polyfill suggéré dans MDN:

  

Polyfill
  Vous pouvez polyfiler 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 à ce sujet, visitez ce lien sur MDN.