jQuery On Click Child Element does not remove the parent Element Class

Question

This snippet I supposed to work but it is not working. On click it adds the class to the parent element, but on click of a child element it doesn't remove the class. I also added JS Fiddle to test for you. Thanks in advance. JS Fiddle: https://jsfiddle.net/fghjqepv/1/

 jQuery(document).ready(function($) { $(".menu-item-has-children").addClass("openLevel js-openLevel"); var $menuTrigger = $('.js-menuToggle'); var $topNav = $('.js-topPushNav'); var $openLevel = $('.js-openLevel'); var $closeLevel = $('.js-closeLevel'); var $closeLevelTop = $('.js-closeLevelTop'); var $navLevel = $('.js-pushNavLevel'); function openPushNav() { $topNav.addClass('isOpen'); //$('body').addClass('pushNavIsOpen'); } function closePushNav() { $topNav.removeClass('isOpen'); $openLevel.siblings().removeClass('isOpen'); //$('body').removeClass('pushNavIsOpen'); } $menuTrigger.on('click touchstart', function(e) { e.preventDefault(); if ($topNav.hasClass('isOpen')) { closePushNav(); } else { openPushNav(); } }); $openLevel.on('click touchstart', function() { $(this).find($navLevel).addClass('isOpen'); }); $closeLevel.on('click touchstart', function() { $(this).closest($navLevel).removeClass('isOpen'); }); $closeLevelTop.on('click touchstart', function() { closePushNav(); }); });

 @media screen and (max-width: 600px) {.pushNav { width: 75%; right: -75%; } } @media screen and (min-width: 601px) {.pushNav { width: 350px; right: -350px; } } ul.pushNav { padding: 0; margin: 0; list-style-type: none; }.pushNav { height: 100%; position: fixed; top: 0; z-index: 100; overflow-x: hidden; overflow-y: auto; background: #2e2f35; transition: ease-in-out 0.5s; }.pushNav hr { border: 1px solid #555; }.pushNav, .pushNav a { font-size: 1em; font-family: helvetica, sens-serif; font-weight: 100; color: #fff; text-decoration: none; }.pushNavIsOpen { overflow: auto; height: 100%; }.js-topPushNav.isOpen, .pushNav_level.isOpen { right: 0; }.closeLevel, .openLevel { cursor: pointer; }.openLevel, .closeLevel, .pushNav a { padding: 1em 0; display: block; text-indent: 20px; transition: background 0.4s ease-in-out; }.openLevel:hover, .closeLevel:hover, .pushNav a:hover { background: #494a50; }.hdg { background-color: #1e1e24; }.closeLevel, closelevel>i { font-size: 1em; color: #a5a5a4; }.burger { position: absolute; top: 24px; right: 48px; }.burger i { font-size: 3em; }.screen { position: fixed; background: rgba(0, 0, 0, 0.7); width: 100%; height: 0; top: 0; bottom: 0; right: 0; opacity: 0; transition: opacity 0.5s ease-in-out; }.pushNavIsOpen.screen { height: 100%; opacity: 1; }.fa { display: inline; padding: 5px; }.wrapper { max-width: 625px; margin: 120px auto; padding: 0 20px; color: #fff; font-family: "Trebuchet MS", Helvetica, sans-serif; font-weight: 100; font-size: 1.1em; line-height: 1.4em; }.wrapper a { color: #20c270; text-decoration: none; }.wrapper button { background-color: #20c270; margin: 50px auto; display: block; padding: 10px 40px; border: none; }.wrapper button:hover { background-color: #18a960; }.wrapper button a { color: #fff; font-size: 2em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="js-menuToggle">Click Me To Open</div> <div class="pushNav js-topPushNav"> <div class="closeLevel js-closeLevelTop hdg"> <i class="fa fa-close"></i> </div> <div id="sidebar-menu-container" class=" meain-container"> <ul id="menu-header-menu" class="header_menu menu-level-1"> <li id="menu-item-6064" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6064 openLevel js-openLevel"> <a href="#">Sub Menu</a> <div class="pushNav level-2 pushNav_level js-pushNavLevel"><a href="#" class="closeLevel js-closeLevel hdg">&lt; Go Back</a> <h4>Sub Menu Title</h4> <h2></h2> <ul class="sub-menu"> <li id="menu-item-6019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6019"><a href="http://localhost/burgur-menu-dev/checkout/">Checkout</a></li> </ul> </div> </li> <li id="menu-item-6022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6022"><a href="http://localhost/burgur-menu-dev/sample-page/">Sample Page</a></li> <li id="menu-item-6063" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6063 openLevel js-openLevel"> <a href="#">Sub Menu Con</a> <div class="pushNav level-2 pushNav_level js-pushNavLevel"><a href="#" class="closeLevel js-closeLevel hdg">&lt; Go Back</a> <h4>Sub Menu Title</h4> <h2></h2> <ul class="sub-menu"> <li id="menu-item-6025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6025"><a href="http://localhost/burgur-menu-dev/blog-masonry-boxed/">Blog – Masonry Boxed</a> </li> </ul> </div> </li> <li id="menu-item-6065" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6065"><a href="#">3rd menu</a></li> </ul> </div> </div>

When we click on "GO Back" Button, it does not remove the class (isOpen). Go back button is on Level 2 after clicking the Sub Menu Item.

Answer 1

When using .on() it can be a little finicky with the way event bubble up.

https://jsfiddle.net/Twisty/2xf7rk6g/9

JavaScript

jQuery(document).ready(function($) {
  $(".menu-item-has-children").addClass("openLevel js-openLevel");
  var $menuTrigger = $('.js-menuToggle');
  var $topNav = $('.js-topPushNav');
  var $openLevel = $('.js-openLevel');
  var $closeLevel = $('.js-closeLevel');
  var $closeLevelTop = $('.js-closeLevelTop');
  var $navLevel = $('.js-pushNavLevel');

  function openPushNav() {
    $topNav.addClass('isOpen');
    //$('body').addClass('pushNavIsOpen');
  }

  function closePushNav() {
    $topNav.removeClass('isOpen');
    $openLevel.siblings().removeClass('isOpen');
    //$('body').removeClass('pushNavIsOpen');
  }

  $menuTrigger.on('click touchstart', function(e) {
    e.preventDefault();
    if ($topNav.hasClass('isOpen')) {
      closePushNav();
    } else {
      openPushNav();
    }
  });

  $openLevel.on('click touchstart', function() {
    console.log("Open");
    $(this).find($navLevel).addClass('isOpen');
  });
  
  $(".pushNav")
    .on('click touchstart', ".js-closeLevel", function() {
      console.log("Close");
      $(this).parent().removeClass('isOpen');
    })
    .on('click touchstart', ".js-closeLevelTop", function() {
      console.log("cLose Top");
      closePushNav();
    });
});

This is less ambiguous and the event is being triggered as expected.

Answer 2

replace this function

$closeLevel.on('click touchstart', function() {
    $(this).closest($navLevel).removeClass('isOpen');

  });

with this

$closeLevel.on('click touchstart', function() {
        $(this).closest($navLevel).removeClass('pushNav_level isOpen');
    
      });