jQuery parent(); function removeClass(); not working (bug)

Question

I have a portfolio where I list portfolio items. I have classes so when you click the item, it has an effect. For some reason, when I click the minus button, it doesn't remove the class 'on'.

Here is the jQuery:

  $('.portfolio-item').click(function() {
    $(this).addClass('on');
  });
  $('.minus').click(function() {
    $(this).closest('.portfolio-item').removeClass('on');
  });

and here is the element set up:

<div class="portfolio-item" style="margin-top: 5px; ">
   <div class="overlay">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>
   </div>
   <div class="about">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>

      <div class="descrip">
         This is a low poly island make in Blender and edited in Photoshop.
      </div>

      <div class="minus"></div>
      <div class="plus"></div>
    </div>
    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/57909c29180525.55fc4b1875c26.png" width="100%" />
</div>

How do I fix this - I want to be able to remove the class 'on' when I click on 'minus'.

Are the elements with the `minus` class added dynamically....perhaps by clicking the element with the `plus` class? If so, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Wesley Smith, Nov 17 '15 at 04:48
No the minus class is made in css and I manually insert the element for it. — Alex Safayan, Nov 17 '15 at 04:50
WHat do you mean "I manually insert the element for it."? Are you adding the element with the `minus` class after the page loads? — Wesley Smith, Nov 17 '15 at 04:51
@AlexSafayan Good luck. Your last name is similar to me. ha ha ha — Alex, Nov 17 '15 at 04:54

score 6 · Accepted Answer · answered Nov 17 '15 at 04:54

When you click your minus it removes the class on. However, at the same time, as minus is located within portfolio-item, it triggers its click event and applies this class back.

You can use e.stopPropagation() to disable this behaviour.

According to documentation, e.stopPropagation

prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Here is the working JSFiddle demo. It looks awful, but demonstrates the functionality.

score 3 · Answer 2 · answered Nov 17 '15 at 04:53

3

you need to use e.stopPropagation()

$('.minus').click(function(e) {
      e.stopPropagation();
    $(this).closest('.portfolio-item').removeClass('on');
  });

DEMO

answered Nov 17 '15 at 04:53

Mohamed-Yousef

23,946
3
19
28

jQuery parent(); function removeClass(); not working (bug)

2 Answers2

Linked