JavaScript

Como remover elemento da página com JavaScript

6 de novembro de 2020

Como remover elemento da página com JavaScript

Neste artigo você vai aprender a como remover elemento da página com JavaScript, de uma maneira muito simples e prática

remover elemento da página com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre DOM e remoção de elementos com JS!

A ideia para resolver este problema é bem simples

Primeiramente vamos precisar acessar o elemento pai, do elemento que precisa ser removido

Então poderemos aplicar o método removeChild no nó alvo

Vamos ver uma aplicação prática desta solução:

<div>
  <p id="elemento-para-remover">Remover este parágrafo</p>
</div>

Este é o nosso HTML, nosso objetivo é remover o parágrafo com o id de elemento-para-remover

Veja agora o código JavaScript necessário:

var elemento = document.querySelector("#elemento-para-remover");

elemento.parentNode.removeChild(elemento);

No código acima selecionamos primeiramente o parágrafo, pelo id que o HTML nos fornece

Depois identificamos o nó pai com o método parentNode

E por fim aplicamos removeChild no próprio nó selecionado

Desta forma o elemento é automaticamente removido, e resolvemos o nosso problema, viu como foi simples?

Conclusão

Neste artigo vimos como remover elemento da página com JavaScript

A técnica utiliza foi: selecionar o elemento alvo e depois o pai do mesmo

Com isso aplicamos o método removeChild, no próprio elemento que foi primeiramente selecionado

E com esta sequência de passos resolvemos o problema

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x