Online Snippets Library

Check div is empty or not using jQuery

Some methods for checking div is empty or not are given below.

if ($('#element').is(':empty')){ //do something} if( $('#element:empty').length ) {//do something} if( !$.trim( $('#element').html() ).length ){//do something}

Last method will remove whitespace and check for the length of the content.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<title>Check div is empty or not using jQuery</title>
<style type="text/css">
.check{border:1px solid;height: 30px;width: 150px;float: left;} 
</style>
</head>
<body>
<div class="check" id="divID" ></div>
</body>
</html>
Javascript
$(document).ready(function(){
$(".check").click(function(){
if(!$.trim( $('#divID').html()).length ) {
alert("Div is empty");
}
else {
alert("Div is not empty ");
}
});
});