Cómo eliminar un nombre de clase de un elemento a través de JavaScript

Como somos conscientes del hecho de que JavaScript se usa comúnmente para manipular los elementos de una página HTML con la ayuda de la interfaz DOM Node. Estas manipulaciones no solo pueden cambiar el estilo o los datos dentro de los elementos HTML, sino que incluso pueden cambiar los atributos de los elementos, como los nombres de clase. Cambiar o eliminar un nombre de clase de un elemento es un trabajo crucial, especialmente cuando está trabajando con la animación de estilo en elementos.

Para cambiar una animación de un elemento a otro elemento, no reescribe el script de animación completo de los otros elementos, ya que puede aumentar la carga en el servidor, sino que escribe el script de animación en los nombres o identificadores de clases, y para cambiar simplemente cambia o cambian Elimine el nombre de clase o la identificación de un elemento HTML de la página web.

Para eliminar el nombre de clase de un elemento usamos el .Lista de clase.eliminar() función.

La sintaxis es:

elemento.Lista de clase.Eliminar (ClassName)

Vamos a aprender cómo podemos usar JavaScript para eliminar un nombre de clase de un elemento en la página web. Para esto, vamos a crear:

• Una página HTML básica con un elemento que tiene un nombre de clase que queremos eliminar.
• Un botón que invocará la función.
• La función vinculada al botón realmente eliminará el nombre de la clase.
• Las herramientas de desarrollador del navegador para verificar la eliminación del nombre de la clase.

Empecemos.

Configuración de la página HTML

Vamos a crear un elemento con una lista de varios nombres de clase. Este También tendrá una identificación específica para crear una referencia a este Cuando estamos usando JavaScript. Podemos crear esto usando las siguientes líneas:

Este es un DIV con múltiples clases

Tenemos un DIV con las clases "Google Yahoo Bing Linuxhint" y la identificación es "LH-Tuts. Agregamos la propiedad de estilo para hacerlo visible. Ejecutamos el archivo HTML para obtener la siguiente salida:

Ahora que tenemos una página HTML básica, creemos un botón que elimine una clase de la elemento.

Hacemos eso usando las siguientes líneas de código:

Eliminar la clase

Nuestra página web se verá así:

Creación del código JavaScript para eliminar la clase del elemento

Ahora tenemos que escribir una función "removeClass ()" en el script. Entonces, creemos una etiqueta y escriba una función que elimine la clase "Google" de la lista de clases con las siguientes líneas:

Esta función debe eliminar la clase "Google" de la lista de clases de la elemento. Probemos y verifiquemos la salida con las herramientas de desarrollador del navegador.

Como puede ver, al principio el div tiene 4 clases diferentes. Pero tan pronto como presionamos el botón, el nombre de la clase "Google" se elimina de la lista de los nombres de la clase.

Incluso podemos eliminar múltiples clases al mismo tiempo, para eso usamos la línea:

div.Lista de clase.eliminar ("google", "yahoo", "bing");

El fragmento de la función se convertiría en:

Ahora, si examinamos la salida con las herramientas de desarrollador del navegador, obtenemos:

Como puede ver, pudimos eliminar múltiples clases al mismo tiempo también.

Enfoque alternativo

Hay una cosa más, estábamos usando el documento.getElementById () Para crear una referencia al elemento, incluso podemos usar el documento.getElementByClassName (), Pero para eso tendremos que cambiar nuestro guión. Como no podemos referirnos a un elemento usando su nombre de clase y luego eliminar un nombre de clase mientras mantenemos una referencia al elemento. Eso es porque el nombre de clase es un "Live Nodelist".

Usar documento.getElementsByClassName () Nuestra función se convierte en:

función removeClass ()
div = documento.getElementsByClassName ("Google Yahoo Bing Linuxhint");
mientras (div.longitud)
div [0].Lista de clase.eliminar ("yahoo", "bing");

Dado que es un nodelista en vivo, tomamos el primer elemento de la lista y eliminamos su nombre de clase. Seguimos repitiendo esto hasta que el nodelista esté vacío.

La salida es como:

Eso es todo para eliminar un nombre de clase de un elemento usando JavaScript.

Conclusión

JavaScript se puede usar para eliminar un nombre de clase de un elemento HTML en una página web con la ayuda de la .Lista de clase.eliminar(). Incluso se puede usar para eliminar múltiples clases de la lista de clases de un elemento. Para mostrar esto, creamos un HTML básico con un div elemento en él. Después, codificamos un script para eliminar la clase de ese elemento. Examinamos la salida utilizando las herramientas de desarrollador del navegador e incluso probamos una forma alternativa de hacer la misma tarea.