'How can I hide div if it is empty?

How to hide a div element if it's empty?

html structure:

<div class="row">
     <div class="col-md-5">
         <div class="left-col"></div>
     </div>
     <div class="col-md-7">
        <div class="right-col"></div>
     </div>
</div>

I always know that left-col wont be empty, but right-col might be. If it's empty, I want to hide the whole row.

I tried the following - but no changes.

$(document).ready(function () {
      $('right-col:empty').hide();
});
jquery


Solution 1:[1]

If you want to hide the whole row, you should try

$('.right-col:empty').parent().parent().hide();

or 

$('.right-col:empty').closest('.row').hide();

If you you want to hide only right-col, you can do it using only css:

.right-col:empty {
    display: none;
}

Solution 2:[2]

You are missing . in class selector, ie

Change it:

$('right-col:empty').hide();

to

$('.right-col:empty').hide();

Solution 3:[3]

You are using class so use . .

$(document).ready(function () {
     $('.right-col:empty').hide();
});
.right-col
 {
    background-color: lightblue;
     height: 200px;
    width: 50%;
}
.left-col
 {
    background-color: red;
     height: 200px;
    width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
     <div class="col-md-5">
         <div class="left-col"></div>
     </div>
     <div class="col-md-7">
        <div class="right-col"></div>
     </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fen1x
Solution 2 Mayank Pandeyz
Solution 3 4b0

Related Questions