CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 13

Add and remove class on a p element

I am trying to add a class called active to the p children of a div using a click event. The first click adds the class to the p, but if I click on the second div the previous inserted class must be removed.

Here is a very basic example:

$('.changeP').on('click',function(){
  $(this).removeClass('active');
  $(this).children('p').addClass('active');
});
.active { color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="changeP">
    <img src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum loret</p>
  </div>

<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="changeP">
    <img src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum loret</p>
  </div>

Upvotes: 1

Views: 145

Answers (5)

Sudipta Mandal
Sudipta Mandal

Reputation: 245

Try this code:

$('.changeP').click(function(){
    var $this = $(this),
        $p = $this.find('p'),
        $activeP = $('.changeP .active');
    if(!$p.hasClass('active')) {
        $activeP.removeClass('active');
        $p.addClass('active');
    }
});

Upvotes: 0

Vaibhav Nigam
Vaibhav Nigam

Reputation: 1487

I guess you are looking for jQuery toggleClass function which adds the class if not added previously and removes if already added. 

$('.changeP').on('click', function() {
  $(this).children('p').toggleClass('active');
});

Upvotes: 0

Djaouad
Djaouad

Reputation: 22776

First, remove class active from all .changeP p elements (paragraphs inside changeP), then add the class to the clicked one:

$('.changeP').on('click', function() {
  $('.changeP p').removeClass('active'); // remove active class from all '.changeP p'
  $(this).children('p').addClass('active'); // add it to this p
});
.active {
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="changeP">
    <img src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum loret</p>
  </div>

  <div class="col-md-3 col-sm-3 col-xs-6">
    <div class="changeP">
      <img src="http://via.placeholder.com/350x150">
      <p>Lorem ipsum loret</p>
    </div>
  </div>
</div>

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

here is your solution:

 $('.changeP').on('click',function(){
   $('p').removeClass('active');
   $(this).find('p').addClass('active');
 });

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337627

You ned to remove the class from all elements that have it, not just the clicked element. To do that change $(this) to $('.active'). Also note that your outer div elements are missing a closing tag. Try this: 

$('.changeP').on('click', function() {
  $('.active').removeClass('active');
  $(this).children('p').addClass('active');
});
.active { color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="changeP">
    <img src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum loret</p>
  </div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="changeP">
    <img src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum loret</p>
  </div>
</div>

Upvotes: 3

Related Questions