Criar um elemento e inserir em outro elemento. Esses são os passos para criar elementos por Javascript/DOM. O novo elemento é o nó filho e o em que foi inserido é o elemento pai.
Para remover um elemento também é necessário usar seu elemento pai.
O método removeChild remove um nó filho.
Sintaxe:
pai.removeChild(filho);
Excluíndo o nó filho
<html> <body> <div id="pai"> <div id="filho"> Conteúdo do nó filho </div> </div> </body> </html>
Para remover elemento de id (identificação, do inglês identification) filho precisamos dele e de seu pai.
var pai = document.getElementById("pai");
var filho = document.getElementById("filho");
var removido = pai.removeChild(filho);
Se o filho não tivesse id seria necessário usar DOM para do pai encontrar o filho e assim removê-lo.
var pai = document.getElementById("pai");
var filho = pai.getElementsByTagName("div")[0];
var removido = pai.removeChild(filho);
removeChild retorna o elemento que foi removido ou falso.
alert(removido == filho); // true
parentNode
Tem um atalho para remover um elemento sem ter que necessariamente conhecer seu pai, é parentNode que já retorna o pai do elemento.
var filho = document.getElementById("filho");
var pai = filho.parentNode;
var removido = pai.removeChild(filho);
Logo:
function removeElement(obj) {
return obj.parentNode.removeChild(obj);
}
removeElement(document.getElementById("filho"));
Remover todos os elementos filhos de um elemento
Para remover todos os elementos filhos de um elemento usamos um laço de repetição de condição “enquanto existir um filho” e execução “remover filho”. O atributo firstChild retorna o primeiro filho de um elemento.
var elemento = document.getElementById("elemento");
while (elemento.firstChild) {
elemento.removeChild(elemento.firstChild);
}
