¿Desea eliminar el elemento dom sin saber su padre?

Question

¿Es posible eliminar un elemento dom que no tiene otro padre que no sea la etiqueta del cuerpo? Sé que esto sería fácil con un framework como jquery, pero estoy tratando de mantener el javascript directo.

Aquí está el código que encontré para hacerlo de otra manera:

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

¡Gracias!

Answer 1

Debería poder obtener el elemento primario del elemento, luego eliminar el elemento de ese

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

Actualizar

Puede establecer esto como un nuevo método en el HTMLElement:

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

Y luego haga el.remove () (que también devolverá el elemento)

Answer 2

childDiv.remove();

funciona en Chrome 25.0.1364.155

Tenga en cuenta que esto no funciona en IE11 u Opera Mini, pero es compatible con todos los demás navegadores.

Consulte aquí: referencia a childnode-remove en caniuse

Answer 3

Creo que puedes hacer algo como ...

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

Consulte node.parentNode para obtener más información al respecto.

Answer 4

document.body.removeChild(child);

Answer 5

Eliminando elemento usando la propiedad outerHTML

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

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

Answer 6

Esta función simplemente elimina un elemento usando id:

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

Answer 7

De acuerdo, básicamente no es necesario que sepa el elemento primario para eliminar un elemento DOM de DOM. Mire el código a continuación, vea cómo está la orden para eliminar un elemento de nodo en JavaScript:

Element + parentNode + removeChild(Element);

Como ve, primero encontramos el elemento, luego usamos .parentNode y luego eliminamos el elemento secundario que es el elemento, ¡por lo que no necesitamos conocer al padre en absoluto!

Así que ahora mira el código real:

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

o como una función

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

También jQuery tiene una función remove () que se usa ampliamente, como:

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

También hay un ChildNode.remove () nativo que no se encuentra en IE y en los navegadores antiguos, pero puede rellenarlo, busque el polyfill sugerido en MDN:

  

Polyfill
  Puede rellenar el método remove () en Internet Explorer 9 y superior   con el siguiente 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]);

Si desea obtener más información al respecto, visite este enlace en MDN.