Hide DIV based on contents being empty

Question

I have a slide jquery plugin called swiper slide. I use the slide to display results from a PHP mysql query 9 results at a time.

Currently my query code and slide code looks like this...

PHP QUERY

$query = mysql_query("SELECT * FROM tblClients  
                      WHERE tblclients.package =  
                      'standard' LIMIT 0, 9", $connection); 

$query_page_2 = mysql_query("SELECT * FROM tblClients  
                             WHERE tblclients.package =  
                             'standard' LIMIT 9, 9", $connection);      

$query_page_3 = mysql_query("SELECT * FROM tblClients  
                         WHERE tblclients.package =  
                         'standard' LIMIT 18, 9", $connection); 

SLIDE CODE

       <div class="swiper-slide">


<?php while ($rows = mysql_fetch_array($query)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>     
        </div>




        <div class="swiper-slide">

<?php while ($rows = mysql_fetch_array($query_page_2)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>          
        </div>




        <div class="swiper-slide">

<?php while ($rows = mysql_fetch_array($query_page_3)) { ?>
<div id="main">
<div id="phone"><?php echo $rows['phone']; ?></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
</div>
<?php } ?>  

        </div>

My question is, either using jquery or PHP, how can I hide the slide that are empty or have no results inside. So if I only have 8 results returned, the 1st slide should be the only one showing.

Answer 1

You can use :empty selector

Select all elements that have no children (including text nodes).

$(function(){
     $('.swiper-slide:empty').hide()
});

OR, You can achieve it using simple CSS :empty pseudo-class

.swiper-slide:empty { display: none;}    

Answer 2

you can use it through by may it help you

$(".swiper-slide:empty:empty").css("display", "none");