Hide div if div contents are empty with Jquery

Sometimes there are DIV’s which we want to hide if the div is empty. We are using :empty selector to achieve this.

Example

<html>
<head>
<title>jQuery hide on empty</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
	// By Class
	$('.blank-test:empty').hide();
	// By ID
	$('#blankTest:empty').hide();
</script>
</head>
<body>
    <div class="blank-test"></div>
    <div class="blank-test">sample text 1</div>
    <div class="blank-test"></div>
    <div class="blank-test"></div>
    <div class="blank-test">sample text 2</div>
    <div id="blankTest">sample text 3</div>
    <div id="blankTest"></div>
</body>
</html>

Output

sample text 1
sample text 2
sample text 3

Share

You may also like...