14

Estou fazendo uma aplicação e me surgiu uma dúvida:

Tem como eu remover um elemento de uma página com javascript sem usar a gambiarra do innerHTML = ''?

Por exemplo, eu quero remover uma div (como a do exemplo abaixo) e todo seu conteúdo:

<div id="conteudo">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

Como eu poderia fazer isso com Javascript puro?

4 Respostas 4

29

Você pode usar Node.removeChild

Note que, para remover o nó (e não somente o conteúdo do mesmo), você precisa antes recuperar o pai deste nó:

// Removendo um nó a partir do pai
var node = document.getElementById("conteudo");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
4
  • 1
    Coloquei o link para versão em português da documentação do Node.removeChild na Mozilla Developer Network. Commented 6/02/2014 às 16:18
  • 1
    Qual a diferença entre usar esse código que você me passou e esse: document.getElementById('conteudo').remove() ?
    – Odair
    Commented 6/02/2014 às 16:23
  • 5
    O método remove() NÃO é suportado por todos os browsers developer.mozilla.org/en-US/docs/Web/API/… Nessa lista você pode ver que o Internet Explorer e o Safari não suportam essa método. Dependendo do que sua aplicação faz e dos clientes da mesma, isso pode lhe causar muitos problemas no futuro. Commented 6/02/2014 às 16:28
  • 2
    Valeu por esclarecer, vou usar esse exemplo que você sugeriu e dar uma estudada a respeito
    – Odair
    Commented 6/02/2014 às 17:14
6

Assim:

var el = document.getElementById( 'conteudo' );
el.parentNode.removeChild( el );
4

É simples:

document.getElementById('conteudo').remove()
3
  • 1
    Está correto, funcionou certinho, valeu pela ajuda!
    – Odair
    Commented 6/02/2014 às 16:20
  • 2
    De nada @Odair porém te dou um aviso: testei agora no Internet Explorer e ele não tem suporte ao método .remove Commented 6/02/2014 às 16:26
  • 5
    O método remove() NÃO é suportado por todos os browsers como você pode ver aqui. Essa lista mostra que o Internet Explorer e o Safari não suportam essa método. Commented 6/02/2014 às 16:54
0

Você pode remover um elemento filho de outro com o seguinte código, que, no caso, foi utilizado para remover um elemento "<button>" que está em "<body>"

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>oiii</div><!---Esse div é so pra atrapalhar--->
<button>Oláa</button>
<script>
button.addEventListener('click', function(){ 
document.body.removeChild(document.body.querySelector("button"))})
//quando você clicar no botão, o mesmo será deletado
</script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .