jQuery: Add and Remove Class

Agregar y quitar clases de CSS con Jquery addClass() y removeClass()

by Porfirio Chavez

HTML

<input type="button" id="add" value="Add">
<input type="button" id="remove" value="Remove">
<hr />
<div id="wrapperDiv" class="claseA"> This is a DIV </div>
<br>
<p>
* Note: last class defined is who overwrite styles.
</p>

CSS

.claseA {
    width: 200px;
    height: 200px;
    background-color: #FC9;
}

.claseB {
    background-color: #FCC;
    width: 100px;
    height: 100px;
}

JavaScript

// Function declaration
function addListeners(){
    var addButton = $("#add");
    addButton.on("click", addClass);
    
    var removeButton = $("#remove");
    removeButton.on("click", removeClass);
}

function addClass(){
    target.addClass("claseB");
}

function removeClass(){
    target.removeClass("claseB");
}

// == Initial run (On DOM ready)
var target = $('#wrapperDiv');
$(document).ready(addListeners);