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();
      }
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="ys-panel ys-tabs">
  	<div class="panel-heading with-tabs">
  		<ul class="nav nav-tabs" role="tablist">
  			<li class="active">
  				<a data-content-id="id1" href="#">
  					<i class="ys-icons ys-icons-test1"></i> Tab 1
  				</a>
  			</li>
  			<li><a data-content-id="id2" href="#"><i class="ys-icons ys-icons-test2"></i> Tab 2</a></li>
  			<li>
  				<a data-content-id="id3" href="#"><i class="ys-icons ys-icons-test3"></i> Tab 3</a>
  			</li>
  		</ul>
  	</div>
  	<div class="panel-body">
  		<div class="tab active" id="id1">
  			<p>...</p>
  		</div>
  
  		 <div class="tab active" id="id2">
  			<p>...</p>
  		</div>
  
  		 <div class="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();
  
  
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <div class="ys-panel ys-tabs">
    <div class="panel-heading with-tabs">
      <ul class="nav nav-tabs" role="tablist">
        <li class="active">
          <a data-content-id="id1" href="#">
            <i class="ys-icons ys-icons-test1"></i> Tab 1
          </a>
        </li>
        <li><a data-content-id="id2" href="#"><i class="ys-icons ys-icons-test2"></i> Tab 2</a>
        </li>
        <li>
          <a data-content-id="id3" href="#"><i class="ys-icons ys-icons-test3"></i> Tab 3</a>
        </li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab active" id="id1">
        <p>...</p>
      </div>
  
      <div class="tab active" id="id2">
        <p>...</p>
      </div>
  
      <div class="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