suppose there is a div with class "box" on clicking the button with class "button" I want to remove the class "box" from the div and add a absolutely new class "active" to the div. what will be the jQuery code of the following?
html
<div class="box">
<button class="button">button</button>
</div>
and also how should I add the new class in CSS ? like normally we add.
You can use removeClass method to remove class and use addClass method to add class using jquery.
You can also chain method as:
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>The simplest jQuery technique is probably with 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>Perhaps the easiest way is to use the classList.replace method which you can use with both jQuery, and 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>Vanilla 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>