jQuery.removeClass(): eliminar clases CSS de elementos HTML

jQuery se creó originalmente para simplificar la manipulación del DOM. Utilizando jQuery.removeClass(), puedes acceder a elementos y eliminar sus clases CSS con facilidad.

¿Qué es el método jQuery.removeClass()?

jQuery.removeClass() te permite eliminar una o más clases CSS de un elemento sin tener que modificar el valor completo del atributo de la clase. Así que puedes eliminar clases específicas de forma selectiva para controlar de forma interactiva el estilo y comportamiento de la página web. Si quieres añadir clases, puedes utilizar jQuery.addClass(). Además, puedes emplear jQuery.on() para configurar controladores de eventos que eliminan clases CSS mediante jQuery.removeClass(). Esta integración es especialmente eficiente si estás trabajando con jQuery en WordPress.

Consejo

El espacio web de IONOS te ofrece la posibilidad de alquilar espacio de almacenamiento sin publicidad para tus aplicaciones web. Como parte del servicio, IONOS también te proporciona dominios y direcciones de correo electrónico personalizados.

Sintaxis y parámetros de jQuery.removeClass()?

La sintaxis de jQuery.removeClass() es la siguiente:

$(selector).removeClass(classname, function(index, currentclass))
jQuery

El classname es el nombre de la clase o clases que quieres eliminar. La function(index, currentclass) es la función que se ejecutará para cada uno de los elementos seleccionados durante el proceso de eliminación de la clase. Por último, el parámetro index especifica el índice del elemento actual y currentclass el valor actual de la clase CSS que se va a eliminar.

Si quieres obtener más información sobre selectores y su sintaxis en jQuery, te recomendamos consultar nuestro tutorial de jQuery.

Consejo

Optimiza tus flujos de trabajo y aumenta la eficiencia de tus procesos de trabajo con la API de IONOS. Puedes crear una clave de acceso segura para tus proyectos de hosting y automatizar la gestión de recursos.

Ejemplos de uso de jQuery.removeClass()

A continuación, te presentamos tres ejemplos diferentes de cómo utilizar el método jQuery.removeClass():

jQuery.removeClass() sin parámetros

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script>
       $(document).ready(function(){  
     $("#btn").click(function(){
       $("p").removeClass();
     });
       });
   </script>
 </head>
 <body>
   <p class="big-font blue">Example text</p>
   <button id="btn">Click to remove classes</button>
 </body>
</html>
html

Cuando utilizas jQuery.removeClass() sin proporcionar argumentos, eliminas todas las clases del elemento seleccionado. En este ejemplo, hemos vinculado removeClass() con la función jQuery.click(). Al hacer clic en el botón con el ID btn, se eliminan las clases big-font y blue del elemento <p>.

Eliminar clases específicas

Si quieres eliminar una lista específica de clases, simplemente introdúcelas como una cadena separada por espacios, como se muestra a continuación:

$("h1").removeClass("highlight uppercase bold")
jQuery

En este ejemplo, utilizamos la expresión removeClass("highlight uppercase bold") para eliminar las siguientes tres clases del elemento <h1>: highlight, uppercase y bold.

Pasar una función como argumento

$(document).ready(function() {
    $("#btn").click(function() {
        $("div#container").removeClass(function() {
            return $(this).attr("class");
        });
    });
});
jQuery

Aquí utilizamos la función jQuery.removeClass() para eliminar todas las clases CSS de un elemento <div> con el ID container cuando se hace clic en el botón con el ID btn. La función .attr("class") que resulta de removeClass() retorna el valor actual del atributo class del elemento. Así se eliminan todas las clases CSS del elemento <div>.

Consejo

Deploy Now de IONOS te permite desplegar aplicaciones web directamente desde GitHub. Tu proyecto se despliega automáticamente en apenas unos pocos pasos. Además, el flujo de trabajo de las acciones se puede personalizar en cualquier momento. Aprovecha la URL de vista previa para previsualizar el despliegue automático y obtener feedback en tiempo real.

¿Le ha resultado útil este artículo?