在子级点击时从父类删除类-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');
    });
});

Answer 1

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> 

Answer 2

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