<h1>Cómo cambiar una clase con JQUERY de un elemento</h1>

    <p id="parrafo">Pincha en el botón correspondiente para añadir o quitar la clase que convierte el texto de este parrafo en color rojo.</p>

    <input id="poner" type="button" value="Poner clase">
    <input id="quitar" type="button" value="Quitar clase">

    <input id="ponerYquitar" type="button" value="Poner o Quitar clase">

    <!-- Cargamos la libreria de Jquery -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
.claseAnadida {
  color:red;
}
$(document).ready(function(){
  // Cuando el documento este listo

  // Obtenemos el elemento a modificar por su identificador
  var parrafo = $("#parrafo");

  // Añadimos una clase cuando pinchamos en el botón "Poner clase"
  $('#poner').click(function(){
    parrafo.addClass('claseAnadida'); 
  });

  // Eliminamos la clase añadida anteriormente cuando pinchamos en el botón "Quitar clase"
  $('#quitar').click(function(){
    parrafo.removeClass('claseAnadida');
  });
  
  // Añadimos o eliminamos una clase con un mismo botón "Poner o Quitar clase"
  $('#ponerYquitar').click(function(){
    parrafo.toggleClass('claseAnadida');
  });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.