Remove a Specific Child from .length()

Question

I have this JS/JQuery code I'm using as part of my accordion menu, it adds the child count beside the parent. I have another code that gives a child with no direct link under that parent a specific class that I use to title the "sub-sub-menu". Example below (this is based off WordPress menu format).

How can I adjust my child count code to exclude the child with the 'class="specific-child"' ? Right now the count is including it, and since it is not an actual link to anything/anywhere, I'd like to exclude it from the .length .

Thank you!

The JS

$( '.menu-item-parent > a' ).addClass( 'accordion-item' );
    
    // Get Sub-menu Item
    let $submenuCount =  $( '[id*="-menu"] > li > a' );
    
    $submenuCount.each( function() {
      
      // Find the number of items in a sub-menu.
      let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;
      
      // Add a leading zero if items is less than 10.
      if( $submenuLength < 10 ) $submenuLength = '0' + $submenuLength;
      
      // Create length into a style.
      $( this ).addClass( 'leading-zero' ).css( '--content', `'${$submenuLength}'` );
      
    });

The HTML/Output

 $( '.menu-item-parent > a' ).addClass( 'accordion-item' );
    
// Get Sub-menu Item
let $submenuCount =  $( '[id*="-menu"] > li > a' );
    
$submenuCount.each( function() {
      
  // Find the number of items in a sub-menu.
  let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;
      
  // Add a leading zero if items is less than 10.
  if( $submenuLength < 10 ) $submenuLength = '0' + $submenuLength;
      
  // Create length into a style.
  $( this ).addClass( 'leading-zero' ).css( '--content', `'${$submenuLength}'` );
      
});

.container {
  display: block;
  position: relative;
  width: 100%;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li { 
  list-style: none;
}

ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

ul.main-menu li:not(ul.sub-menu li) {
  display: block;
  position:relative;
  max-width: 300px;
}

ul.main-menu li a:not(ul.sub-menu li a) {
  display: block;
  position: relative;
  margin: 0.125rem 0;
  padding: 0.375rem 0;
  font-style: normal;
  font-weight: 400;
  font-size:1.125rem;
  text-transform: uppercase;
  letter-spacing: 0em;
  line-height: 1.4em;
  color: var(--theme-colour);
  text-decoration: none;
  cursor: pointer;
}

ul.main-menu li.menu-item-parent a:not(ul.sub-menu li a)::before {
  content: var(--content, "c");
  display: inline-block;
  position: relative;
  float: right;
  vertical-align: middle;
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0em!important;
}

ul.main-menu li {
  padding-top: 3px;
  padding-bottom: 3px;
}

ul.main-menu li.menu-item-parent > ul.sub-menu li > ul.sub-sub-menu {
  padding-bottom: 10px;
}

ul.main-menu li.menu-item-parent > ul.sub-menu li > ul.sub-sub-menu > li {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul id="menu-main-menu" class="main-menu">
    <li><a href="stackoverflow.com">Menu Item</a></li>
    <li class="menu-item-parent">
      <a>Menu Item Parent</a>
      <ul class="sub-menu">
        <li><a href="stackoverflow.com">Child</a></li>
        <li><a href="stackoverflow.com">Child</a></li>
        <li>
          <a href="#" class="specific-child">Title Child</a>
          <ul class="sub-sub-menu">
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
          </ul>
        </li>
        <li><a href="stackoverflow.com">Child</a></li>
        <li><a href="stackoverflow.com">Child</a></li>
      </ul>
    </li>
    <li><a href="stackoverflow.com">Menu Item</a></li>
  </ul>
</div>

Answer 1

Change the line

let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;

to

let $submenuLength = $( this ).parent().find( '.sub-menu:not(.specific-child)' ).children().length;