Remover elemento DOM sem conhecer seu pai?

Question

É possível remover um elemento DOM que não possui senão a tag-mãe? Eu sei que isso seria fácil com um quadro como jQuery, mas eu estou tentando vara para javascript reta.

Aqui está o código que eu encontrei para fazê-lo de outra forma:

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

Obrigado!

Answer 1

Você deve ser capaz de obter o pai do elemento, em seguida, remover o elemento daquela

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

Atualizar

Você pode definir isso como um novo método na HTMLElement:

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

E, em seguida, fazer el.remove() (que também irá retornar o elemento)

Answer 2

childDiv.remove();

trabalhos em Chrome 25.0.1364.155

Note que este não funciona no IE11 ou o Opera Mini, mas é suportado por todos os outros navegadores.

Veja aqui: referência a childNode-remove on caniuse

Answer 3

Eu acho que você pode fazer algo como ...

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

Consulte node.parentNode para obter mais informações sobre isso.

Answer 4

document.body.removeChild(child);

Answer 5

elemento Remoção usando a propriedade outerHTML

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

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

Answer 6

Esta função simplesmente remover um elemento usando id:

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

Answer 7

OK, você basicamente não precisa conhecer o pai para excluir um elemento DOM do DOM, olhada no código abaixo, veja como é a ordem para excluir um elemento de nó em JavaScript:

Element + parentNode + removeChild(Element);

Como você pode ver, encontramos o elemento em primeiro lugar, em seguida, usando .parentNode e depois remover a criança que é o elemento novo, por isso não precisa saber o pai em tudo!

Então, agora olhar para o código real:

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

ou como uma função

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

Além disso jQuery tem a função remove () que é amplamente usar, como:

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

Também há ChildNode.remove() nativa que não é no IE e navegadores antigos, mas você pode polyfill-lo, procure o polyfill sugerido a partir MDN:

Polyfill
Você pode polyfill o método remove () no Internet Explorer 9 e superior com o seguinte 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]);

Se você gostaria de saber mais sobre ele, visite este ligação no MDN.