Remove class from parent on child click - jQuery

Question

I am completely stuck on this problem (see jsfiddle here). I have a very simple set up where an onclick adds a class which displays an element. Within this element is a close button for which the onclick should remove the class from the parent. But this is not working.

I have tried removeAttr('class') which also fails. Looking in chrome inspector I can see the selector is right and is targeting the parent, but the class cannot be removed.

This is part of a larger project so I cannot change the html structure. But welcome any suggestions on how to do this in jQuery.

HTML:

<div class="print-wrap">
    <ul>
        <li class="settings-tab">+</i>
            <div class="settings-wrap">
                <div class="iphone-close">x</div>
                <div class="content"></div>
            </div>
        </li>
        <li class="img">
            <img src="http://placehold.it/250x166">
        </li>
    </ul>
</div>

jQuery:

jQuery(function(){
    jQuery('.settings-tab').click(function(){
        var $this = jQuery(this);
        $this.addClass('settings-out');
    });

    jQuery('.settings-wrap .iphone-close').click(function(e){
        var $this = jQuery(this);
        var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
        $parent.removeClass('settings-out');
    });
});

jQuery('.settings-wrap .iphone-close').click(function(e){ var $this = jQuery(this); $('.settings-out').removeClass(); jQuery('.iphone-close').hide(); $this.addClass('settings-tab'); }); — Girish Sakhare, Nov 10 '15 at 10:17

score 4 · Accepted Answer · answered Nov 10 '15 at 10:06

Use event.stopPropagation in the event handler of close button. The event is bubbled up to the parent .settings-tab and the handler of is is executed which is adding the class again.

Updated Fiddle

jQuery(function() {
  //settings tab:
  jQuery('.settings-tab').click(function() {
    jQuery(this).addClass('settings-out');
  });

  //Settings tab close
  jQuery('.settings-wrap .iphone-close').click(function(e) {
    jQuery(this).closest('.settings-out').removeClass('settings-out');
    e.stopPropagation();
  });
});

.print-wrap {
  width: 250px;
  height: 250px;
  overflow: hidden;
  position: relative;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #D6A0A0;
}
.print-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  left: 0;
}
.settings-tab {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  background: #f5d43f;
  transition: all .3s ease-in-out;
  transition-delay: .25s;
  z-index: 4;
  cursor: pointer;
}
.settings-tab .settings-wrap {
  width: 250px;
  right: -250px;
  height: 250px;
  background: lightblue;
  position: absolute;
  top: 0;
}
.settings-out {
  right: 250px;
}
.iphone-close {
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="print-wrap">
  <ul>
    <li class="settings-tab">+</i>
      <div class="settings-wrap">
        <div class="iphone-close">x</div>
        <div class="content"></div>
      </div>
    </li>
    <li class="img">
      <img src="http://placehold.it/250x166">
    </li>
  </ul>
</div>

Excellent - thank you. If I understand correctly `stopPropagation();` prevents the `onclick` from bubbling up to the parent is this right? So I guess what was happening is the that the child `onclick` was firing as expected, but so was the parent `onclick` therefore removing the class and adding it again immediately? — user3065931, Nov 10 '15 at 10:13
@user3065931 Right. If you want to see what event bubbling is check http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing/4616720#4616720 — Tushar, Nov 10 '15 at 11:30

score 0 · Answer 2 · answered Nov 10 '15 at 10:08

jQuery(document).on('click','.settings-wrap .iphone-close',function(e){
         var $this = jQuery(this);
        var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
        $parent.removeClass('settings-out');
    });
});

try changing jQuery(document).on('click','.settings-wrap .iphone-close',function(e){

demo

Remove class from parent on child click - jQuery

2 Answers2