.empty()?.empty() removes all child nodes (elements and text) from each matched element since jQuery 1.0. The parent stays in the DOM.
$(".hello").empty()
// <p class="hello">Hello</p> → <p class="hello"></p>
$("#list").empty().append("<li>New</li>") // clear, then rebuild
$("p").remove() // deletes the <p> itself
$("p").empty() // keeps <p>, clears inside| Need | Use |
|---|---|
| Clear a container | $(el).empty() |
| Delete the element | $(el).remove() |
| Park children for later | $(el).children().detach() |
| Replace inner HTML | $(el).html(newHtml) |
.empty()Select the parent, clear its contents, then optionally refill.
.empty() — no arguments..append() / .html() if you need new content next.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Parent container(s) to clear |
| Arguments | None | .empty() takes no parameters |
| Return | — | Same jQuery collection (chainable) |
for each matched element el:
for each child (and descendant) of el:
remove jQuery data and event handlers
remove child from the DOM
// el itself stays
return original matched set
// Text nodes count as children — they are removed tooKeep these facts handy while clearing containers.
| Topic | Detail |
|---|---|
| Syntax | .empty() |
| Since | jQuery 1.0 |
| Removes | All children + descendants + text |
| Keeps | The matched parent element |
| Cleanup | Child data and handlers cleared |
| vs remove | Parent stays vs parent deleted |
| vs detach | Destroy children vs park nodes |
Clear a paragraph with .empty(), or reset and refill it.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Remove all content inside every <p>.
$("p").empty();$("p") matches each paragraph..empty() removes every child node inside.<p> tags stay in the document..empty() vs .remove()Clear inside a box, or delete the box entirely.
$("#a").empty(); // <div id="a"></div> stays
$("#b").remove(); // #b is gone from the DOM#a; the div remains selectable.#b from the document tree.Common pattern: clear a list, then add fresh items.
var fruits = ["Apple", "Banana", "Cherry"];
var $list = $("#fruits").empty();
fruits.forEach(function (name) {
$list.append($("<li>").text(name));
});.empty() returns the same #fruits collection.<li> elements are created with .text().Deep trees inside the parent are removed in one call.
$("#panel").empty();
// removes spans, lists, text — everything inside #panel#panel remains an empty container..remove() on every child.Check these before wiping a live container.
If you need those nodes again with events intact, .detach() them instead of emptying the parent.
.empty() always clears everything inside. To remove a subset, select those children and call .remove().
.data() and handlers on the matched parent itself are not cleared by .empty() — only descendants are cleaned.
.html("") is not clearer intentPrefer .empty() when you mean “clear children.” Use .html() when you are setting new markup.
.empty() has been part of jQuery since 1.0. It works wherever your loaded jQuery version runs.
Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Safe for clearing containers before rebuild. Use .detach() when child handlers must survive.
| Approach | Cost | Best for |
|---|---|---|
.empty() | One clear + cleanup | Wiping a container |
Loop .remove() on children | More work | Avoid — prefer empty |
.empty().append(…) | Clear + insert | List redraws from data |
For large lists, empty once, then append a batch (or a fragment). Avoid repeatedly emptying inside a tight animation loop.
.empty().append(…) for fresh lists.One line: .empty() wipes a container clean so you can keep the parent and refill it.
Delete matched elements from the document and clean up their data.
8 people found this page helpful