🚀 Capítulo 11: Removendo Elementos
🎯 Objetivo da Aula
Ao final desta aula, você saberá como remover elementos do HTML usando JavaScript com os métodos remove() e removeChild().
🏢 O Cenário Prático (Seu Desafio)
Naves inimigas destruídas precisam sumir do nosso radar! Seu desafio hoje é criar um botão “Destruir Alvo” que, ao ser clicado, remove o elemento da nave inimiga da tela!
🧠 Fundamentos: A Teoria Traduzida
Assim como podemos criar, também podemos destruir elementos no DOM. Temos duas formas principais:
1. elemento.remove()
É a forma mais moderna e simples. Você seleciona o elemento e manda ele se destruir.
- Exemplo:
document.querySelector('#inimigo').remove();
2. pai.removeChild(filho)
É a forma antiga. Você precisa selecionar o elemento pai e dizer qual filho quer remover.
- Exemplo:
lista.removeChild(item);
📖 Exemplo Guiado: Destruindo a Estrela da Morte
<div id="espaco">
<div id="estrela-da-morte">⚫ Estrela da Morte</div>
</div>
<button id="atacar">Atirar!</button>const botao = document.querySelector('#atacar');
const alvo = document.querySelector('#estrela-da-morte');
botao.addEventListener('click', () => {
alvo.remove(); // Some da tela!
alert('Alvo destruído!');
});🛠️ Prática Obrigatória 1
Crie uma lista de compras (ou de naves) no seu HTML. Adicione um botão para remover o primeiro item da lista.
🛠️ Prática Obrigatória 2
Faça com que, ao clicar em qualquer item da lista, aquele item específico seja removido (Dica: use e.target.remove()).
🔑 Gabarito de Código/Fórmulas
Prática 2:
document.querySelector('ul').addEventListener('click', (e) => {
e.target.remove();
});