how to remove the class on clicking a button and adding new class

Question

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.

Please see [ask]. You need to make an effort and show some code. This is not a new topic, so there's lots to read on SO. — isherwood, Oct 08 '21 at 14:07
Duplicates: https://stackoverflow.com/questions/16046879/remove-class-from-parent-element-with-jquery/16046901, https://stackoverflow.com/questions/12296329/removing-class-for-parent-div-in-jquery — isherwood, Oct 08 '21 at 14:10

DecPK · Answer 1 · 2021-10-08T13:57:02.100

0

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>

edited Oct 08 '21 at 13:57

answered Oct 08 '21 at 13:53

DecPK

24,537
6
26
42

1

Good time to take advantage of jquery's chaining. – freedomn-m Oct 08 '21 at 13:55
@freedomn-m nice catch, thanks for suggestion and updated the code. – DecPK Oct 08 '21 at 13:57

Andy · Answer 2 · 2021-10-08T14:06:34.100

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>

score -1 · Answer 3 · answered Oct 08 '21 at 14:12

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>

how to remove the class on clicking a button and adding new class

3 Answers3