Como remover um elemento HTML usando JavaScript?

As manipulações de DOM de JavaScript permitem que um usuário exclua qualquer elemento da página da web html usando o remover() método. No entanto, é necessária uma referência ao seu nó em JavaScript para remover um elemento. Somente com essa referência um elemento pode ser removido da página da web. O remover() O método remove o elemento html do modelo de objeto de documento da página da web, tomando o elemento como um nó. Vejamos a sintaxe do remover() Método disponível para todos os elementos da página HTML.

Sintaxe do método Remover ()

A sintaxe do método de remoção é dada como

Elemrefference.remover();

Da sintaxe acima, é evidente que você só precisa aplicar o remover() em um elemento ou em um nó para removê -lo, e nenhum parâmetros adicionais são necessários.

Exemplo: Remova um elemento de uma página da web html

Para demonstrar o uso do remover() Método, crie uma página da web html com algum texto e um botão usando as linhas de código dentro da tag:

Você quer me remover!

Clique em mim para remover

Observe que um OnClick () o atributo foi adicionado ao botão que procurará o ButtonClicked () Método dentro do arquivo de script. E o parágrafo a remover tem o ID como “MyText”

Execute a página da web html. Você verá a seguinte tela no seu navegador:

Para adicionar funcionalidade no botão Clique, vá até o arquivo de script e crie o ButtonClicked () função com as seguintes linhas de código:

função buttonClicked ()
// As próximas linhas devem ser colocadas lá dentro aqui

Dentro desta função, o primeiro passo é obter uma referência ao parágrafo a ser removido usando o getElementById () método como

var elem = documento.getElementById ("MyText");

A referência foi armazenada dentro do Elem variável. Use o remover() método sobre isso Elem variável com a ajuda do operador de pontos

Elem.remover();

Todo o snippet de código de script é como o seguinte:

função buttonClicked ()
var elem = documento.getElementById ("MyText");
Elem.remover();

Execute a página da web e clique no botão para remover a tag de parágrafo com o ID "MyText”:

E o elemento foi removido da página da web html e também.

Conclusão

Com cada elemento HTML, existe uma função interna que vem com o ES6 JavaScript que erradica o elemento da página da Web HTML e do DOM. Este método é chamado de remover() método e é aplicado ao elemento usando um operador de ponto. O método Remone () não requer argumentos e não retorna nenhum valor. Este artigo demonstrou o funcionamento do método Remover ().