how to check if a div is empty

Hello I have a div that has some content inside of it but when its empty I want it to say something like div is empty

heres my code

<div class="results">Hello</div>


7 Answers
7

CSS has a pseudo class :empty exactly for this purpose. Use that to find the right divs, and use CSS pseudo element ::before to insert the text you want to display in empty divs:

:empty

div

::before

.results:empty::before {
content: "I feel so empty";
color: #999;
}

<div class="results">Hello</div>
<div class="results"></div>

You can check the text content of <div> by .text(), use trim() to remove spaces.

<div>

.text()

trim()

var isEmpty = $('.results').text().trim() === '';
console.log( isEmpty );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Hello</div>

You can create your own. You can get all the contents of a div with $.html(), so check if $("myDiv").html() == "" and this is your answer.
You can make it as a standalone function

function isDivEmpty(elementId){
return $(elementId).html() == "";
}


or extend jQuey to have access to it anywere.

$.fn.isEmpty = function(){
return $(this).html() == "";
}
// usage
alert($("#test").isEmpty()); // alerts true or false


Using plain javascript

var isEmpty = document.getElementsByClassName('results').innerHTML === "";


using jquery

var isEmpty = $(".results").html() === "";


You can use jquery like this:

if ($('.results').is(':empty')){
// insert code here
}


Edit: #div is a placeholder.

#div

Edit 2: Changed #div to .results

#div

.results

if ($('.results').is(':empty')){
console.log('empty');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Hello</div>
<div class="results"></div>
<div class="results">World</div>

id

div

.results

id

Another approach to check if a div is empty:

div

var isEmpty = !$(".results")[0].hasChildNodes();
console.log(isEmpty);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Bello</div>

you can find the working solution here
https://jsfiddle.net/06nLec5t/8/

used id to identify the empty div name, or you can exclude that.

div

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.