Remova todos os elementos com classe específica usando JavaScript

Ao atualizar uma página da web ou o site, existem certos elementos associados a funções que precisam ser removidas instantaneamente. Por exemplo, omitindo uma funcionalidade específica (tendo vários efeitos) de uma página da web sobre o botão Clique. Nessas situações, remover todos os elementos com uma classe específica usando JavaScript é um recurso muito útil para tornar um site fácil de usar e economizar tempo.

Este blog ilustrará as abordagens para remover todos os elementos com classes específicas usando JavaScript.

Como remover todos os elementos com uma classe específica usando JavaScript?

Para remover todos os elementos com uma classe específica usando JavaScript, implemente as seguintes abordagens em combinação com o “para cada()" e "remover()" métodos:

• ““QuerySelectorAll ()”Método.
• ““Variedade.de()" e "getElementsbyclassName ()" métodos.

Vamos ilustrar os métodos declarados um por um!

Abordagem 1: Remova todos os elementos com classe específica em JavaScript usando o método querySelectorAll ()

O "para cada()”O método aplica uma função para cada elemento contido em uma matriz. O "remover()”O método omite um elemento do documento. Considerando que a "QuerySelectorAll ()”O método busca todos os elementos que correspondem a um (s) seletor (s) CSS e fornece uma lista de nós em troca. Esses métodos podem ser aplicados em combinação para buscar vários elementos com classes idênticas, iterar através de cada elemento e removê -los no botão Clique.

Sintaxe

variedade.foreach (função (corrente, índice, matriz), isso)

Na sintaxe acima mencionada:

• função: É a função que deve ser executada para cada elemento em uma matriz.
• atual: Este parâmetro significa o valor da matriz atual.
• índice: Aponta para o índice do elemento atual.
• variedade: Refere -se à matriz atual.
• esse: Corresponde ao valor que está sendo passado para a função.

documento.QuerySelectorAll (seletores)

Na sintaxe dada:

• ““Seletores”Corresponde a um ou mais de um seletor CSS.

Exemplo
Vamos passar pelo exemplo a seguir:

Esta é uma imagem

Clique para remover elementos

Aplique as seguintes etapas no trecho de código acima:

• No código HTML, o “

  " e "”Elementos, respectivamente, têm as mesmas classes.

• Além disso, crie um botão com um “ONCLICKEvento Invocando a função removelements ().
• Agora, no código JS, declare uma função chamada “RemoverElement ()”.
• Em sua definição, aplique o “QuerySelectorAll ()”Método e aponte para a classe especificada contra os elementos, conforme declarado na primeira etapa.
• Depois disso, invocar o “para cada()”Método para acessar cada elemento via iteração.
• Por fim, aplique o “remover()”Método para remover os elementos iterados na etapa anterior contra a classe buscada.
• Isso resultará na remoção de todos os elementos com a classe específica após o botão Clique.

Saída

Na saída acima, pode -se observar que os elementos visíveis no modelo de objeto de documento são removidos no botão Clique.

Abordagem 2: Remova todos os elementos com classe específica em JavaScript usando a matriz.de () e getElementsbyclassName () métodos

O "Variedade.de()”O método retorna uma matriz de um objeto com o comprimento da matriz como seu parâmetro. O "getElementsbyclassName ()”O método fornece a coleção de um elemento com um (s) nome (s) de classe (s) especificado. Esses métodos podem ser combinados para acessar os elementos por classe e retornar e removê -los iterando através deles.

Sintaxe

Variedade.de (objeto, mapa, valor)

Na sintaxe acima mencionada:

• ““objeto”Refere -se ao objeto a ser convertido em uma matriz.
• ““mapa”Corresponde à função do mapa que precisa ser mapeada em cada item.
• ““valor”Aponta para o valor a ser utilizado como“esse”Para a função do mapa.

documento.getElementsbyclassName (classe)

Na sintaxe dada:

• ““aula”Representa o nome da classe do elemento.

Exemplo
Vamos para o exemplo a seguir:

Remova os elementos

Clique para remover elementos

Nas linhas acima do código:

• Da mesma forma, inclua o “

  ", e a "”Elementos com as mesmas classes.

• Da mesma forma, crie um botão com um “ONCLICK”Evento redirecionando para a função Removelements ().
• No código JavaScript, defina uma função chamada “removelements ()”.
• Em sua definição, aplique o “Variedade.de()" e "getElementsbyclassName ()”Métodos em combinação para retornar os elementos buscados contra a classe especificada na forma de uma matriz.
• Depois disso, aplique o “para cada()" e "remover()”Métodos para iterar através dos elementos na etapa anterior e removê -los no botão Clique, respectivamente.

Saída

A saída acima significa que a funcionalidade desejada é cumprida.

Conclusão

O "para cada()" e "remover()”Métodos combinados com os“QuerySelectorAll ()”Método ou“Variedade.de()" e "getElementsbyclassName ()”Os métodos podem ser usados ​​para remover todos os elementos com classes específicas usando JavaScript. Os métodos anteriores podem ser aplicados para acessar os elementos por classe diretamente e removê -los iterando ao longo deles, envolvendo menos complexidade de código. Os últimos métodos podem ser implementados em combinação para acessar os elementos por classe, devolvê -los na forma de uma matriz e removê -los iterando através deles. Este artigo explicou como remover todos os elementos com uma classe específica usando JavaScript.