Hiding tab if no text / content with jQuery-CodePudding

Im trying to hide tabs which have no content using jQuery. I thought this would be relatively easy but can't seem to get it to work. Any pointers would be greatly appreciated.

This is my jQuery so far ...

jQuery( document ).ready( function( $ ) {
    $('.tab-type-custom').each( function(e) {
        if( !$.trim( $(this).find('row').html() ).length ) {
            var ID = $(this).attr('id');
            $( '#'  ID   '_toggle').hide()
        }
    });
});

These are my tabs

<div >
   <ul id="descriptionTab"  style="position: relative;">
      <li> <a id="listing_tab_profile_toggle" data-section-id="profile"  data-options="{}"> Profile </a> </li>
      <li > <a id="listing_tab_brands_toggle" data-section-id="brands"  data-options="{}"> Brands </a> </li>
      <li> <a id="listing_tab_dry-goods_toggle" data-section-id="dry-goods"  data-options="{}"> Dry Goods </a> </li>
      <li> <a id="listing_tab_reviews_toggle" data-section-id="reviews"  data-options="{}"> Reviews </a> </li>
   </ul>
</div>

And this is the content of the tabs (well two of them for simplicity). One with content, other no content/text, just HTML.

<!-- This is my tab content -->
<div >

    <!-- .tab-type-custom / has content / (also is active tab) -->
    <section  id="listing_tab_brands">
    <div >
        <div >
            <div >
                <div >
                <div  id="block_x1G2pTC">
                    <div >
                        <div >
                            <div >
                            <h5>  Brands  </h5>
                            </div>
                        </div>
                        <div >
                            <div >
                                <p>

                                     Some content

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div  id="block_Lomkw5V">
                    <div >
                        <div >
                            <div >
                                <h5>  More content  </h5>
                            </div>
                        </div>
                        <div >
                            <p>

                                Some content

                            </p>
                            <p>

                                Some content

                            </p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    </section>

    <!-- .tab-type-custom / has NO content / Trying to hide - as no content, just HTML -->

    <section  id="listing_tab_dry-goods">
    <div >
        <div >
            <div >
                <div > </div>
            </div>
            <div >
                <div > </div>
            </div>
        </div>
    </div>
    </section>

</div>

CodePudding user response：

You should use !$.trim($(this).find('.row.cts-left-column').html()).length since there is way to many .row to make it a good selector.

Demo

jQuery(document).ready(function($) {
  $('.tab-type-custom').each(function(e) {
    if (!$.trim($(this).find('.row.cts-left-column').html()).length) {
      var ID = $(this).attr('id');
      $('#'   ID   '_toggle').hide()
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <ul id="descriptionTab"  style="position: relative;">
    <li> <a id="listing_tab_profile_toggle" data-section-id="profile"  data-options="{}"> Profile </a> </li>
    <li > <a id="listing_tab_brands_toggle" data-section-id="brands"  data-options="{}"> Brands </a> </li>
    <li> <a id="listing_tab_dry-goods_toggle" data-section-id="dry-goods"  data-options="{}"> Dry Goods </a> </li>
    <li> <a id="listing_tab_reviews_toggle" data-section-id="reviews"  data-options="{}"> Reviews </a> </li>
  </ul>
</div>
<!-- This is my tab content -->
<div >

  <!-- .tab-type-custom / has content / (also is active tab) -->
  <section  id="listing_tab_brands">
    <div >
      <div >
        <div >
          <div >
            <div  id="block_x1G2pTC">
              <div >
                <div >
                  <div >
                    <h5> Brands </h5>
                  </div>
                </div>
                <div >
                  <div >
                    <p>

                      Some content

                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div  id="block_Lomkw5V">
              <div >
                <div >
                  <div >
                    <h5> More content </h5>
                  </div>
                </div>
                <div >
                  <p>

                    Some content

                  </p>
                  <p>

                    Some content

                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- .tab-type-custom / has NO content / Trying to hide - as no content, just HTML -->

  <section  id="listing_tab_dry-goods">
    <div >
      <div >
        <div >
          <div > </div>
        </div>
        <div >
          <div > </div>
        </div>
      </div>
    </div>
  </section>

</div>