How to add class using jQuery?

Question

I made a small function whose work to do add class in <li> when we clicks on <li>, but I want to remove that if it is already had with <li>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Tue, 22 May 2012 12:39:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

    $(function(){

    $('.main').find('li').each(function(){

    $(this).live('click', function (){

    $(this).addClass('active')

    })

    })

    })

    </script>

  </head>
  <body>

  <ul class="main">
  <li>first</li>

  <li>second</li>
    <li>third</li>
      <li>fourth</li>  

  </ul>

  </body>
</html>

BenMorel · Accepted Answer · 2013-12-30 19:01:22Z

21

You can just use toggleClass this will add or remove it as necessary

$('.main li').live('click',function(){
  $(this).toggleClass('active');
});

if you want to remove this class from elsewhere, you can add an extra line:

$('.main li').live('click',function(){
  $('.main li.active').removeClass('active')
  $(this).addClass('active');
});

edited Dec 30, 2013 at 19:01

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 22, 2012 at 12:47

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Umair Tariq · Accepted Answer · 2022-03-04 07:54:48Z

3

Better we can use .on() or .delgate() methods:

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

https://api.jquery.com/live/

$('#showDiv').on('click',function(){
  $(this).toggleClass('active');
});

answered Mar 4, 2022 at 7:54

Umair Tariq

913 bronze badges

Comments

TwisterStudios · Accepted Answer · 2012-05-22 12:57:04Z

2

Use the jquery function .toggleClass.

$('.main li').click( function(){
  $(this).toggleClass('active');
});

That should do the trick ;) http://api.jquery.com/toggleClass/

edited May 22, 2012 at 12:57

answered May 22, 2012 at 12:47

TwisterStudios

758 bronze badges

2 Comments

Jitender Over a year ago

when we click first li it is adding class active now i want if we click second li then first li class should be removed

TwisterStudios Over a year ago

As Jamiec suggested you can add $('.main li.active').removeClass('active')

Prakash Bhosale · Accepted Answer · 2020-03-03 10:32:01Z

1

This will work try...

$("#button").click(function(){

 $(".addclass").addClass("add");



})

$("#button2").click(function(){

 $(".addclass").removeClass("add");

})

.add{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="addclass">Sample text to add class on it</p>
<button id="button">Add Class</button>
<button id="button2">Remove Class</button>

answered Mar 3, 2020 at 10:32

Prakash Bhosale

2471 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to add class using jQuery?

4 Answers 4

Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Linked

Related