supongamos que hay un div con clase "cuadro" al hacer clic en el botón con clase "botón". Quiero eliminar el "cuadro" de clase del div y agregar una clase absolutamente nueva "activa" al div. ¿Cuál será el código jQuery de los siguientes?
html
<div class="box"> <button class="button">button</button> </div>y también, ¿cómo debo agregar la nueva clase en CSS? como normalmente agregamos.
Puede usar el método removeClass para eliminar la clase y usar el método addClass para agregar la clase usando jquery.
También puede encadenar el método como:
box.removeClass("box").addClass("active"); const box = $(".box"); $(".button").on("click", function() { box.removeClass("box"); box.addClass("active"); }) .box { background-color: red; } .active { background-color: yellowgreen; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <button class="button">button</button> </div>La técnica jQuery más simple es probablemente con toggle :
$('.button').click(function() { $(this).parent().toggleClass('box active'); }); .box { background: #ddd; } .active { background: pink; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <button class="button">button</button> </div>Quizás la forma más fácil es usar el método classList.replace que puede usar tanto con jQuery como con vanilla JS.
jQuery.
$('.button').click(function () { const parent = this.parentNode; parent.classList.replace('box', 'active'); }); .active { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <button class="button">button</button> </div>Vainilla JS.
const button = document.querySelector('button'); button.addEventListener('click', handleClick, false); function handleClick() { const parent = this.parentNode; parent.classList.replace('box', 'active'); } .active { background: red; } <div class="box"> <button class="button">button</button> </div>