Check if Div is Empty or HTML Element has Children Tags

Posted on March 28, 2015 in jQuery/JavaScript Category

If you have an empty div or other element that you want it removed if does not contain any html tags or text inside it, here is a quick guide how to do it with jQuery. I will also show you how to handle empty tags using CSS only. Make sure to watch the video tutorial if you want to see live examples.

To give you a fast example of what we are going to do, let's pretend that you have a <div> and inside it there will be a text added by user. If the user will not add anything in that tag, your style will still remain on that div container and you want it removed if it doesn't contain any html tags or text.

Sample Structure to Check if Div is Empty

Full HD Video Tutorial

Check for Empty Tag Elements with CSS

The easiest method to hide or remove an empty tag is by using the CSS3 selector :empty directly on the element you want. You can read more about this selector here.

.someDiv:empty {
	display: none;

The problem with the :empty selector is that he is only targeting just empty elements, without white space. If you have, for example, a space there or a simple &nbsp;, your CSS code will not work. To solve that we will use jQuery.

Check if Div is Empty (if HTML Element has Text) with jQuery

With jQuery you can check the length of the text inside the div or element you are targeting to see how many characters it has. There are 2 ways to do that. One with text() function and the other one with html() function.

Checking Text Length of Element with text() function

Using the text() function to check the length, it will count only the characters inside the element. If you have another empty tag inside it, you must use the html() function.

if ( $('.emptyDiv').text().length == 0 ) {
	// length is 0

Get Text Length together with the Tags of Elements inside with html() function

To check if div is empty (or any html element) together with the tags elements inside it, use html() function. If you use just text, it will work the same as the function above, the difference is this one is counting the length in tags also.

if ( $('.emptyDiv').html().length == 0 ) {
	// length is 0

Check If Element has Any Children Tags Inside

If you have a custom structure where you know the user can add only a text which is always inside another tag, you can search if a div or another element contains any children tags inside it.

if ( $('.someDiv').children().length == 0 ) {
	// div has no other tags inside it

Check for Empty Elements with White-space

If an element contains just a space, without text, it will not be considered an empty element because has something inside it. Here is how you check if the div is empty even with blank spaces (white-space) or entities such as &nbsp; (non-breaking space) using $.trim function from jQuery.

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
	// check if div is empty, with &amp;nbsp; or white-space

Update (11 April 2015)

To check if div is empty (or if every <p> in your document is empty) and remove the white-space inside it with the condition to not contain any html tag inside it you must to write 2 if conditions and then replace the content using text() or html() functions. Below is the code. You can uncomment the second line inside the last if statement, to remove all paragraphs which contains white-space (&nbsp;).

$('p').each(function() {
	if ( $.trim( $(this).text() ).length == 0 ) {
		if ( $(this).children().length == 0 ) {
			// $(this).remove(); // remove empty paragraphs

Check If a Certain Tag Exists inside a Container

If you have an already built html structure which is generated automatically and you want an easy way to check if inside a div there is a tag, here is how you do it. For example you want to check for <h1> tag if exists. To do that just point the jQuery selector on <h1> and check the length of it.

if ( $('.someDiv h1').length == 0 ) {
	// tag does not exist inside container

End Notes

All the code above is a handy method to work with elements if you don't really have too much access in the html structure. You can add a class to body tag to handle everything very simple. If you have any questions or improvements, drop them below in the comments section.

Related Articles
  1. Riaan says:

    Just want to say thank you for this – it helped me solve an issue I struggled to get an answer to.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

one + = 8

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.