如果使用Jquery列表没有值，如何删除span标签

Question

我需要一个帮助。 我使用Bootstrap方式有许多menu-submenu列表。 如果任何列表或子列表内部没有任何值，则需要删除span标记。 我在下面解释我的代码。

<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>

上面的代码是html生成的输出。 实际上，所有数据都是在li元素上动态绑定的。 在这里，我需要任何parent li或child li没有ul元素或值，那么我将删除相应的span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>标签。 我需要使用Jquery/Javascript动态制作。

Answer 1

您可以使用jQuery来获得它：

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

对于找到的每个范围，请检查其父li是否有孩子ul 。 如果找到，则跨度必须可见，否则应隐藏。