Como remover um elemento HTML usando JavaScript?
A maneira mais atômica de remover um elemento da página da web html é usar o remover () nesse elemento. Para aplicar qualquer método a um elemento HTML, o usuário deve criar uma referência a esse elemento dentro do código JavaScript.
Este artigo demonstrará como remover um elemento de um documento HTML com a ajuda de um exemplo.
O método remove ()
O método Remover (como mencionado acima) é usado para remover um elemento no qual é aplicado no documento HTML. A sintaxe do método de remoção é o seguinte:
Elemref.remover()Nesta sintaxe, o elemref é a referência do elemento HTML dentro do código JavaScript. Esta função não assume nenhum parâmetro, nem retorna nada. Vamos dar uma olhada em alguns exemplos
Exemplo1: Removendo um elemento usando sua classe
Comece criando um novo arquivo HTML e coloque as seguintes linhas dentro desse arquivo:
Eu tenho a classe "removeme", então remova -me!
Por linuxhint
Nessas linhas, uma tag simples é criada com a classe definida para "me remova". A execução deste documento HTML exibe a seguinte saída no terminal:
A saída mostra o
Tag na tela. O é apenas um espaço reservado para que a página da web não esteja vazia quando o elemento é removido. Depois disso, basta adicionar um botão que removerá o elemento no botão Pressione e defina seu valor OnClick como ButtonClicked ():
Isso nos dá a seguinte página da web:
O botão é adicionado à página da web, agora na tag Adicionar nas seguintes linhas:
função buttonClicked ()elem = documento.getElementsByClassName ("removeme");
Elem.remover();
Nas linhas acima:
- A função ButtonClicked () é criada, que será executada ao pressionar o botão Remover
- Dentro da função, uma referência ao elemento a ser removida é criada usando seu nome de classe
- Depois disso, o método remover () é chamado no elemento para removê -lo do documento HTML
Execute o código agora para obter os seguintes resultados:
Assim que o botão é pressionado, o elemento com o ClassName = "Removeme" é removido do documento HTML.
Exemplo 2: Removendo um elemento usando seu ID
Crie um documento HTML e, assim como no Exemplo 1, crie uma tag P e um botão, mas desta vez, dê o
Marque um ID em vez de classe:
Desta vez, eu tenho o id como "removeme", então remova -me!
Por linuxhint
Isso fornecerá a seguinte saída no navegador:
Depois disso, no arquivo de script, adicione as seguintes linhas:
função buttonClicked ()elem = documento.getElementsById ("removeme");
Elem.remover();
Nas linhas acima:
- A função ButtonClicked () é criada, que será executada ao pressionar o botão Remover
- Dentro da função, uma referência ao elemento a ser removida é criada usando seu id = "removeme"
- Depois disso, o método remover () é chamado no elemento para removê -lo do documento HTML
Executar o elemento HTML e pressionar o botão cria o seguinte resultado:
O elemento com o ID como "removeme" foi removido do documento HTML
Conclusão
O método Remone () pode ser aplicado em um elemento para removê -lo do DOM do documento HTML. No entanto, para aplicar este método a um elemento, uma referência ao elemento deve ser feita primeiro. E então, o método remover () é usado nessa referência desse elemento usando o operador de pontos. Este artigo explicou o funcionamento do método Remone () com exemplos.