How To Use The jQuery empty() Method And :empty Selector
If you want to know how to use empty in jQuery, we’ll tell you in this post. It’s a little tricky, because jQuery uses the name “empty” for two different operations, but don’t worry — we’ll cover them both.
By the way, if you’re interested in jQuery, or JavaScript, or web development in general, there are plenty of excellent online courses in these subjects and more. Check them out today!
jQuery In A Flash
But first, a bit of instant background on jQuery. It’s a library of code that adds capabilities to JavaScript. jQuery makes it easier to to a variety of things, largely on the client side (that is, in the user’s browser window). It’s contained in a single file of open-source JavaScript code. You can download it and use a local copy, or link to one of the publicly-available hosted instances of jQuery, including those maintained by Google, Amazon, and Microsoft.
Basic jQuery Use
If you’re familiar with JavaScript, there are just a handful of basic things that you need to know about using jQuery. First, you need to link to the jQuery library (either a local or online e instance) in the <head> section of your web page, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Second, the basic jQuery syntax looks something like this:
$("select_something").do_something(argument1,argument2,etc);
or
$("select_something").do_something(function() {...});
Where select_something represents any of several selectors (commands that select one or more elements in the page) and do_something represents any of several methods. A method can take a set of arguments or a function (which can include several operations).
Third, it’s generally advisable (although not always necessary) to place your jQuery code inside the function of a jQuery ready() method, which checks to see if the document is fully loaded before running the code:
$(document).ready(function(){... });
Running On Empty
So, what about the jQuery empty command — or rather, the two empty commands? And why are there two?
Until the release of jQuery version 1.4, the jQuery library had only one empty command: the empty() method, which deletes the contents of the selected element(s). What jQuery did not have was a good way to select HTML elements that had no content — in other words, an “empty” selector. That was added with version 1.4, as the :empty selector. We’ll discuss both of them here, but we’ll start with the empty() method.
The empty() Method
The jQuery empty() method has one purpose: to clear all of the contents out of an HTML element. it doesn’t do anything else, and it doesn’t require or allow any arguments. It just clears out the contents, leaving the element itself. (If you want to remove an element, you can use the remove() method, which removes the element plus its contents, or the detach() element, which removes the element, but does not remove associated events and data.)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#tcb").click(function(){
$("#clear_me").empty();
$("#tell_em").text("Done!");
});
});
</script>
</head>
<body>
<h1>Things To Do:</h1>
<div id="clear_me" >
<h3>Important:</h3>
<p>Clear this div out!</p>
</div>
<div id="leave_me_alone" >
<p>Leave me alone!</p>
</div>
<p id="tell_em">Click to take care of business.</p>
<button id="tcb">TCB</button>
</body>
</html>
You can run the sample code — copy it to a text file, give the file the extension.HTM, and open it in a browser. It displays output in two <div> sections. When you click on the button, the contents of the upper <div> disappear, the content of the lower <div> is unchanged, and the message “Click to take care of business.” changes to “Done!”
How It Works
First, let’s take a look at the HTML. We create two <div> elements, and give them both IDs. We also assign IDs to the paragraph giving the instructions (“Click to take care of business.”) and to the button. We could have done most or all of this without assigning IDs, but they make the code easier to follow.
Now let’s look at the jQuery code inside the ready() method’s function:
$("#tcb").click(function(){
$("#clear_me").empty();
$("#tell_em").text("Done!");
});
It’s just three lines: when the user clicks the button labeled “tcb”, the click() method is triggered, causing the two lines inside its function to run. The first line:
$("#clear_me").empty();
is the one that actually includes the empty() method. Once it runs, the contents of the “clear_me” <div> are deleted. The second line,
$("#tell_em").text("Done!");
just replaces the instruction paragraph with the message “Done!”
No Arguments, Please!
We included that second line to demonstrate something. If you’re already familiar with how jQuery operates, you may have wondered whether it’s possible to use a function with the empty() method, in the same way that we placed the empty() and text() method code inside the click() method’s function.
In other words, would the following code work?
$("#clear_me").empty(function(){$("#tell_em").text("Done!");});
It would work with a lot of jQuery methods; after all, it works that way with the click() method. But if you try to run the code as shown above, it will clear the <div> without displaying the “Done!” message. it won’t produce an error message, but it will ignore the function, and everything that it contains.
The bottom line is that empty() won’t take any arguments. It just clears the selected element(s), and that’s all — so don’t try to talk it into doing anything else.
The jQuery :empty Selector
What about the :empty selector? It doesn’t really have anything to do with the empty() method; they’re both part of jQuery, but that’s about it. The :empty selector checks for HTML elements that don’t contain anything. It can select all empty elements, or, as with most jQuery selectors, it can check elements by type or by ID, as it does in this example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("td:empty").html("<b><font color='#FF0000'>No Data</font></b>");
$("#more_info:empty").html("<b>No additional information.</b>");
});
</script>
</head>
<body>
<h1>Client Information</h1>
<table border="0" cellpadding="4" >
<tr>
<td><b>Name</b></td>
<td>Snatley Critt</td>
</tr>
<tr>
<td><b>Address</b></td>
<td></td>
</tr>
<tr>
<td><b>City</b></td>
<td>San Bernardino</td>
</tr>
<tr>
</table>
<p id="more_info"></p>
</body>
</html>
How :empty Works
The above example displays a single client record in a simple table. In a dynamically-generated page, the data would probably come from a server-based database. The jQuery code, running on the client side, must be able to handle whatever it receives from the database.
In this case, it checks to see if any of the basic client information in the table cells is missing:
$("td:empty").html("<b><font color='#FF0000'>No Data</font></b>");
If it finds an empty <td> element, it fills in the empty cell with the message “No Data” in red, boldface text. If we were to change “td:empty” to “:empty”, it would do the same thing to all empty elements.
The next line checks to see if the element with the ID “more_info” is empty:
$("#more_info:empty").html("<b>No additional information.</font></b>");
If it is empty, it places the message “No additional information.”, in boldface, in that element. If the “more_info” element contained anything, the code would leave it alone.
There’s so much more that you can do with jQuery and JavaScript, of course, and there’s an excellent selection of online courses in JavaScript, jQuery, and other web development, web design, and web programming tools. Take a look — you’ll be amazed at what you see!
Recommended Articles
JQuery Text Effects: How Text Effects can make Your Webpage More Interactive
Udemy Editor
jQuery Interview Questions
Featured course
Last Updated June 2018
Use jQuery to create stunning animations, provide fast feedback forms, handle all user events and perform Ajax calls. | By Joe Parys, Peter Sommerhoff, Joe Parys Support
Explore CoursejQuery students also learn
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.