Hide Empty Element On Bootstrap Tab Via Jquery

HTML:

• Solution 1:

  I would try something like:

  // for each tab link
  $('.nav-tabs li a').each(function() {
      // does it's related div (by content id) not have a p element?if ($('#' + $(this).data('content-id') + ' > p').length == 0) {
          // if not, find the link's parent li element and hide it
          $(this).parent('li').hide();
      }
  });

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="ys-panel ys-tabs"><divclass="panel-heading with-tabs"><ulclass="nav nav-tabs"role="tablist"><liclass="active"><adata-content-id="id1"href="#"><iclass="ys-icons ys-icons-test1"></i> Tab 1
  				</a></li><li><adata-content-id="id2"href="#"><iclass="ys-icons ys-icons-test2"></i> Tab 2</a></li><li><adata-content-id="id3"href="#"><iclass="ys-icons ys-icons-test3"></i> Tab 3</a></li></ul></div><divclass="panel-body"><divclass="tab active"id="id1"><p>...</p></div><divclass="tab active"id="id2"><p>...</p></div><divclass="tab active"id="id3"></div></div></div>

  Solution 2:

  You can do it like this:

  $(".panel-body .tab:not(:has(p))").each(function() {
    alert(this.id)
    $('a[data-content-id="' + this.id + '"]').closest("li").hide();
  
  
  });

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass="ys-panel ys-tabs"><divclass="panel-heading with-tabs"><ulclass="nav nav-tabs"role="tablist"><liclass="active"><adata-content-id="id1"href="#"><iclass="ys-icons ys-icons-test1"></i> Tab 1
          </a></li><li><adata-content-id="id2"href="#"><iclass="ys-icons ys-icons-test2"></i> Tab 2</a></li><li><adata-content-id="id3"href="#"><iclass="ys-icons ys-icons-test3"></i> Tab 3</a></li></ul></div><divclass="panel-body"><divclass="tab active"id="id1"><p>...</p></div><divclass="tab active"id="id2"><p>...</p></div><divclass="tab active"id="id3"></div></div></div>

  Solution 3:

  You need to view each element on its own.

  With the selector you have ($(".tab")) you select all elements with the class tab. The length of the selected elements would always be three in your example (because you have three tabs).

  To iterate over them take a look at the .each function (see other answers). You can either check in this function if the element has any content or improve your selector to do that for you (see not filter).

Share