Rimuovere l'elemento dom senza conoscerne il genitore?

Question

È possibile rimuovere un elemento dom che non ha un genitore diverso dal tag body? So che sarebbe facile con un framework come jquery, ma sto cercando di seguire javascript direttamente.

Ecco il codice che ho trovato per farlo diversamente:

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

Grazie!

Answer 1

Dovresti essere in grado di ottenere il genitore dell'elemento, quindi rimuovere l'elemento da quello

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

Aggiorna

Puoi impostarlo come nuovo metodo sul HTMLElement:

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

E poi el.remove () (che restituirà anche l'elemento)

Answer 2

childDiv.remove();

funziona in Chrome 25.0.1364.155

Nota che questo non funziona in IE11 o Opera Mini ma è supportato da tutti gli altri browser.

Vedi qui: riferimento a childnode-remove on caniuse

Answer 3

Penso che tu possa fare qualcosa come ...

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

Vedi node.parentNode per ulteriori informazioni al riguardo.

Answer 4

document.body.removeChild(child);

Answer 5

Rimozione dell'elemento mediante la proprietà outerHTML

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

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

Answer 6

Questa funzione per rimuovere semplicemente un elemento usando id:

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

Answer 7

OK, fondamentalmente non è necessario conoscere il genitore per eliminare un elemento DOM da DOM, guardare il codice seguente, vedere come è l'ordine di eliminare un elemento nodo in JavaScript:

Element + parentNode + removeChild(Element);

Come vedi, troviamo prima l'elemento, quindi usando .parentNode e poi rimuoviamo il figlio che è di nuovo l'elemento, quindi non abbiamo bisogno di conoscere il genitore!

Quindi ora guarda il vero codice:

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

o come funzione

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

Anche jQuery ha la funzione remove () che è ampiamente usata, come:

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

Esiste anche il ChildNode.remove () nativo che non si trova in IE e nei vecchi browser, ma è possibile eseguire il polyfill, guarda il polyfill suggerito da MDN:

  

Polyfill
  È possibile eseguire il polyfill del metodo remove () in Internet Explorer 9 e versioni successive   con il seguente codice:

//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 vuoi saperne di più, visita questo link su MDN.