Class append and remove in javascript

Question

I want that whenever I add on button then a class should append and after next click class should remove. I tried with following code but class not removing in second click here is my code.

$("#hide_show_keypad").click(function (e) {
  $(this).addClass("fcurrent").siblings().removeClass("fcurrent");
});

<input type="submit" name="btn" id="hide_show_keypad" class="mytest" >

on your click you can add an `if` condition and check if the class exist on the element or not as `if($(this).hasClass('fcurrent')) $(this).removeClass('fcurrent'); else $(this).addClass('fcurrent');` — vikscool, Aug 20 '18 at 08:29

score 0 · Answer 1 · answered Aug 20 '18 at 08:31

Use toggleClass() to make it work as you want.

$("#hide_show_keypad").click(function(e) {
  $(this).toggleClass("fcurrent")
});

Demo

$("#hide_show_keypad").click(function(e) {
  $(this).toggleClass("fcurrent")
});

.fcurrent{color:blue;background-color:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" name="btn" id="hide_show_keypad" class="mytest" />

score 0 · Answer 2 · answered Aug 20 '18 at 08:33

$('#btn').click(function() {
  $('#paragraph').toggleClass("style");
});

.style {
  background-color: #000;
  color: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="paragraph">This is a sample paragraph.</p>
<br/>
<button type="button" id="btn">Click Me</button>

Class append and remove in javascript

2 Answers2