how to remove the class on clicking a button and adding new class [duplicate]-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>