Como remover um nome de classe de um elemento através de javascript

Como estamos cientes do fato de que JavaScript é comumente usado para manipular os elementos de uma página HTML com a ajuda da interface do nó DOM. Essas manipulações podem não apenas alterar o estilo ou os dados dentro dos elementos HTML, mas também podem alterar os atributos dos elementos, como os nomes de classe. Alterar ou remover um nome de classe de um elemento é um trabalho crucial, especialmente quando você está trabalhando com animação de estilo em elementos.

Para mudar uma animação de um elemento para outro elemento, você não reescreva todo o script de animação dos outros elementos, pois isso pode aumentar a carga no servidor, em vez de escrever script de animação em nomes de classe ou IDs e, para mudar, você simplesmente muda ou Remova o nome da classe ou o ID de um elemento HTML da página da web.

Para remover o nome da classe de um elemento, usamos o .Lista de classe.remover() função.

A sintaxe é:

elemento.Lista de classe.Remover (ClassName)

Vamos aprender como podemos usar o JavaScript para remover um nome de classe de um elemento na página da web. Para isso, vamos criar:

• Uma página básica HTML com um elemento com um nome de classe que queremos remover.
• Um botão que invocará a função.
• A função vinculada ao botão removerá o nome da classe.
• As ferramentas de desenvolvedor do navegador para verificar a remoção do nome da classe.

Vamos começar.

Configurando a página HTML

Nós vamos criar um Elemento com uma lista de vários nomes de classe. Esse também terá um ID específico para criar uma referência a isso Quando estamos usando JavaScript. Podemos criar isso usando as seguintes linhas:

Esta é uma div com várias classes

Temos uma div com as classes “Google Yahoo Bing Linuxhint” e o ID é “LH-TUTS. Adicionamos a propriedade de estilo para torná -la visível. Executamos o arquivo HTML para obter a seguinte saída:

Agora que temos uma página HTML básica, vamos criar um botão que remova uma classe do elemento.

Fazemos isso usando as seguintes linhas de código:

Remova a classe

Nossa página da web ficará assim:

Criando o código JavaScript para remover a classe do elemento

Agora temos que escrever uma função "removeclass ()" no script. Então, vamos criar uma tag e escrever uma função que removerá a classe "Google" da lista de classes com as seguintes linhas:

Esta função deve remover a classe "Google" da lista de classes do elemento. Vamos experimentar e verificar a saída com as ferramentas de desenvolvedor do navegador.

Como você pode ver, a princípio o div tem 4 classes diferentes. Mas assim que pressionarmos o botão, o nome da classe "Google" é removido da lista dos nomes da classe.

Podemos até remover várias classes ao mesmo tempo, pois usamos a linha:

div.Lista de classe.remover ("google", "yahoo", "bing");

O trecho de função se tornaria:

Agora, se examinarmos a saída com as ferramentas de desenvolvedor do navegador, obtemos:

Como você pode ver, conseguimos remover várias classes ao mesmo tempo.

Abordagem alternativa

Há mais uma coisa, estávamos usando o documento.getElementById () Para criar uma referência ao elemento, podemos até usar o documento.getElementByclassName (), Mas por isso teremos que mudar nosso script. Como não podemos nos referir a um elemento usando o nome da classe e exclua um nome de classe, mantendo uma referência ao elemento. Isso porque o nome da classe é um “Lista de nodelas ao vivo”.

Usar documento.getElementsbyclassName () Nossa função se torna:

função removeclass ()
div = document.getElementsByClassName ("Google Yahoo Bing Linuxhint");
while (div.comprimento)
div [0].Lista de classe.Remover ("Yahoo", "Bing");

Como é uma lista de nodelas ao vivo, pegamos o primeiro item da lista e removemos o nome da classe. Continuamos repetindo isso até a lista de nodel.

A saída é como:

É isso para remover um nome de classe de um elemento usando JavaScript.

Conclusão

JavaScript pode ser usado para remover um nome de classe de um elemento html em uma página da web com a ajuda do .Lista de classe.remover(). Pode até ser usado para remover várias classes da lista de classe de um elemento. Para mostrar isso, criamos um HTML básico com um div elemento nele. Depois, codificamos um script para remover a classe desse elemento. Examinamos a saída usando as ferramentas de desenvolvedor do navegador e até experimentamos uma maneira alternativa de fazer a mesma tarefa.