CSS trick
Hide elements that contain either nothing or only an HTML comment.
CSS
div:empty {
display: none;
}
This will hide div if it empty.
Will match
<div></div>
<div><!-- test --></div>
Will not match
<div> </div>
<div>
<!-- test -->
</div>
<div>
</div>
You can also create separate CSS class instead of applying to the element
.container {
width: 100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
.container:empty {
display:none
}
Will match
<div class="container"></div>
<div class="container"><!-- test --></div>
Will not match
<div class="container"> </div>
<div class="container">
<!-- test -->
</div>
<div class="container">
</div>
<div class="container"></div>
<div class="container"><!-- test --></div>
Will not match
<div class="container"> </div>
<div class="container">
<!-- test -->
</div>
<div class="container">
</div>

Comments