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

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.

Solution 1:^[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.

Solution 2:^[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');
    
      });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Twisty
Solution 2	payam

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]