jQuery .empty(): Clear Content and Keep the Container
.empty() removes all child elements and text nodes from matched elements. The containers themselves and their attributes remain, allowing you to clear a list or results area and refill it.
Syntax and behavior
$("#list").empty();
The method removes nested elements as well as visible text. It cleans jQuery data and handlers on the removed descendants, while retaining the selected container’s attributes and handlers. It returns the container’s jQuery object. You can inspect the remaining node in the browser’s Elements panel, which shows the live Document Object Model (DOM).
The official jQuery .empty() documentation describes additional call signatures and argument types.
Complete runnable example
Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery empty example</title>
<style>
body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
.marked { background: #fff0b3; border: 2px solid #835b00; }
.active { color: #a00000; font-weight: bold; }
button, input, select { font: inherit; }
#output { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container" class="marked"><p>Paragraph <strong>Emphasis</strong></p>Direct text</div>
<button id="empty" type="button">Empty content</button>
<button id="fill" type="button">Add content</button>
<p id="output" aria-live="polite"></p>
<script>
$(function () {
$("#empty").on("click", function () {
$("#container").empty();
$("#output").text("Containers: " + $("#container").length +
" / Child nodes: " + document.getElementById("container").childNodes.length);
});
$("#fill").on("click", function () {
$("#container").append($("<p>").text("New result"));
});
});
</script>
</body>
</html>
Expected result
Empty content removes the paragraph, strong element, and direct text, while the container’s border remains. The output is Containers: 1 / Child nodes: 0. Clicking Add content creates a New result paragraph inside that same container.
Important details and troubleshooting
- An input’s value is not a child node, so .empty() does not clear it. Use .val("") for an input field.
- Delegated handlers on the surviving container can apply to newly added descendants. Handlers attached directly to deleted child nodes are different and are removed.
- Clicking Add content repeatedly keeps appending paragraphs. Use .empty().append(...) when replacing results rather than accumulating them.
- Use .remove() to delete the container itself. Save its contents beforehand if you need to restore them.
Compare the behavior with .remove() and element deletion, .val() and current input values.
jQuery .removeAttr(): Delete HTML Attributes
Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.
jQuery .add(): Combine Element Selections
Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.
jQuery .toggleClass(): Toggle a Class or Set Its State
Distinguish reversing a class from setting a known Boolean state, with a toggle-button example and current syntax.
jQuery .has(): Select Elements with Matching Descendants
Filter the original selection by matching descendants, and see why has and find return different elements.
jQuery :button Selector: Which Elements Does It Match?
Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.
jQuery .find(): Select Matching Descendants
Search through descendant levels while excluding the container, and compare find with children, filter, and has.
jQuery .css(): Read, Set, and Clear Styles
Read computed styles, set and clear inline properties, and handle CSS units and numeric values in jQuery 4.0.
jQuery .attr(): Read and Set HTML Attributes
Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.
jQuery .before(): Insert Content as the Previous Sibling
Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.
jQuery .removeClass(): Remove Specific or All Classes
Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.