How to remove span tag if list has no value using Jquery

Question

I need one help. I have many menu-submenu list in dropdown manner using Bootstrap . Here I need to remove the span tag if any list or sublist has no value inside it dynamically. I am explaining my code below.

<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
   <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_navigationUl" class="navbar-nav navbar-top-view nav">
      <li class="dropdown mega-drop pstatic">
         <a href="/vocational-school-programs" class="mainmenuitem">Programs<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul class="dropdown-menu mega-h-drop-menu fwidth activeul">
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Business</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/business-office-administration">Business Office Administration</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Cosmetology</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/cosmetology">Cosmetology</a></li>
               </ul>
            </li>
            <li class="pstatic">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Health Care &amp; Administration</a>
               <ul class="dropdown-menu mega-v-drop-menu w-100">
                  <div class="row fullmenu">
                     <div class="col-sm-6 pull-left">
                        <ul>
                           <li><a href="/vocational-school-programs/limited-scope-x-ray-technician">Limited Scope X-Ray Technician</a></li>
                           <li><a href="/vocational-school-programs/patient-care-technician">Patient Care Technician</a></li>
                           <li><a href="/vocational-school-programs/pharmacy-technician">Pharmacy Technician</a></li>
                           <li><a href="/vocational-school-programs/health-services-administration">Health Services Administration</a></li>
                        </ul>
                     </div>
                     <div class="col-sm-6 pull-left">
                        <ul>
                           <li><a href="/vocational-school-programs/medical-assistant-technician">Medical Assistant Technician</a></li>
                           <li><a href="/vocational-school-programs/medical-front-office-billing">Medical Front Office &amp; Billing</a></li>
                           <li><a href="/vocational-school-programs/dental-assistant">Dental Assistant</a></li>
                        </ul>
                     </div>
                  </div>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">HVAC</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/heating-ventilation-air-conditioning">Heating Ventilation and Air Condition (HVAC)</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Information Technology</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/information-technology">Information Technology</a></li>
                  <li><a href="/vocational-school-programs/computer-network-technician">Computer Network Technician</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Nursing</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/nursing">Nursing</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/campus-search" class="mainmenuitem">Campuses<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul class="dropdown-menu mega-h-drop-menu activeul">
            <li><a href="/vocational-school-programs/tx/houston">Houston</a></li>
            <li><a href="/vocational-school-programs/fl/orlando">Orlando</a></li>
            <li><a href="/vocational-school-programs/fl/boynton-beach">Boynton Beach</a></li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">More </a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
                  <li><a href="/vocational-school-programs/fl/hialeah">Hialeah</a></li>
                  <li><a href="/vocational-school-programs/fl/tampa">Tampa</a></li>
                  <li><a href="/vocational-school-programs/fl/lauderdale-lakes">Lauderdale Lakes</a></li>
                  <li><a href="/vocational-school-programs/fl/margate">Margate</a></li>
                  <li><a href="/vocational-school-programs/fl/miami">Miami (Main Campus)</a></li>
                  <li><a href="/vocational-school-programs/fl/pembroke-pines">Pembroke Pines</a></li>
                  <li><a href="/vocational-school-programs/fl/west-palm-beach">West Palm Beach</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/financial-aid" class="mainmenuitem">Financial Aid<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/career-services" class="mainmenuitem">Career Services<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl04_childNodesContainer" class="dropdown-menu activeul">
            <li class="dropdown mega-drop pstatic">
               <a href="/employ-our-graduates" class="mainmenuitem">Employer Resources<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/about-us" class="mainmenuitem">About Us<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl05_childNodesContainer" class="dropdown-menu activeul">
            <li class="dropdown mega-drop pstatic">
               <a href="/about-us/accreditations" class="mainmenuitem">Accreditations<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
            </li>
         </ul>
      </li>
   </ul>
</div>

The above code is the html generated output. Actually all data are dynamically bind over the li element. Here I need if any parent li or child li has no ul element or value then I will remove the respective span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span> tag. I need to make dynamically using Jquery/Javascript .

Answer 1

You can get it using jQuery:

$(".navbar-toggleable-sm span").each(function() {
    if ($(this).parents("li:first").find("ul").length == 0)
        $(this).hide();
    else
        $(this).show();
});

For each span found, check if its parent li has a child ul . If found, the span must be visible, otherwise should be hidden.