javascript - obtener - ¿Eliminar el elemento dom sin conocer su padre?

obtener el padre de un elemento jquery

Question

¿Es posible eliminar un elemento dom que no tiene otro padre que la etiqueta corporal? Sé que esto sería fácil con un framework como jquery, pero estoy tratando de seguir directamente con JavaScript.

Aquí está el código que he encontrado 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

Creo que puedes hacer algo como ...

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

Ver node.parentNode para más información sobre eso.

Answer 2

De acuerdo, básicamente no necesita saber que el padre debe eliminar un elemento DOM de DOM, mire el siguiente código, vea cómo es el orden para eliminar un elemento de nodo en JavaScript:

Element + parentNode + removeChild(Element);

Como puede ver, primero buscamos el elemento, luego usamos .parentNode y luego eliminamos al niño, que es el Elemento nuevamente, ¡así que no necesitamos saber nada del padre!

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 la función remove () que es ampliamente utilizada, como:

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

También hay ChildNode.remove() nativo que no está en IE y navegadores antiguos, pero puedes rellenarlo, mira el polyfill sugerido desde 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 developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove en MDN.

Answer 3

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

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

Actualizar

Puede configurar 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 4

Eliminar elemento utilizando la propiedad outerHTML

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

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

Answer 5

Esta función simplemente elimina un elemento usando id:

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

Answer 6

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.

Ver aquí: referencia a childnode-remove en caniuse

Answer 7

document.body.removeChild(child);