jQuery .empty() Method

What You’ll Learn

The .empty() method removes every child node inside matched elements — text, elements, and nested descendants — while the parent stays in the DOM. This tutorial covers syntax since 1.0, comparisons with .detach(), .remove(), and .html(), the official empty demo, and five practical try-it examples.

Introduction

Dynamic UIs constantly refresh content — clear a message list before fetching new notifications, wipe a table body before rendering updated rows, or reset a widget panel without destroying its outer shell. When you need to remove everything inside an element but keep the container itself, jQuery provides .empty().

Available since jQuery 1.0, .empty() removes all child nodes from each matched element. That includes text nodes (plain strings of text between tags) and every nested descendant element. The matched parent remains in the document tree, ready to receive new content via .append(), .html(), or .load().

Unlike .detach(), which preserves jQuery data and event handlers on removed nodes, .empty() actively cleans up child associations to prevent memory leaks. Use .detach() when you plan to reinsert nodes; use .empty() when child content should be discarded. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .empty() Method

.empty() takes no arguments. For each element in the jQuery collection, it removes every child node — text, comments, and elements at any depth — then returns the same jQuery collection for chaining.

The parent element itself is untouched: its tag, attributes, and jQuery data remain. Only descendants are removed. Before deleting child elements, jQuery strips their event handlers and internal data cache entries so orphaned listeners do not leak memory.

📝 Syntax

jQuery .empty() has a single form — no parameters:

Remove all child nodes — since 1.0

.empty()

• Removes all child nodes (text and elements) from each matched element.
• Returns the jQuery object for chaining.
• Does not accept a selector or filter argument.

Return value

• Always the same jQuery collection that was emptied.
• Chain .append(), .html(), or .load() immediately after.

Official empty pattern

The jQuery API documentation demo clears all paragraph content on button click:

$( "button" ).on( "click", function() {
  $( "p" ).empty();
} );

Before: <p>Hello</p>. After: <p></p> — the paragraph tag remains, text is gone.

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

$( "button" ).on( "click", function() {
  $( "p" ).empty();
} );

Before: <p>Hello, Person and person.</p>
After click: <p></p> (empty tags remain)

All paragraph text removed — parent elements stay in DOM

$( "#refresh" ).on( "click", function() {
  var $panel = $( "#results" );

  $panel.empty().append( "<p class='loading'>Loading…</p>" );

  $.get( "/api/items", function( html ) {
    $panel.empty().append( html );
  });
});

Click refresh → old results removed
Loading placeholder shown
Ajax completes → panel emptied again, new HTML appended

#results div itself never leaves the DOM

// Before: <div id="box" class="widget">Hello <span>World</span></div>
$( "#box" ).empty();
// After:  <div id="box" class="widget"></div>

// id, class, and jQuery data on #box remain
console.log( $( "#box" ).attr( "class" ) ); // "widget"

Text "Hello" removed
Nested <span> removed
#box div still exists with id and class intact

Use .remove() instead to delete #box entirely

$( "#sidebar" ).empty();

// Removes every descendant at any depth:
// <ul>, <li>, <a>, text nodes — all gone
// <aside id="sidebar"></aside> remains

Multi-level nav tree inside #sidebar → fully cleared
No need to loop or call .remove() on each child

jQuery cleans up child event handlers during removal

function renderItems( items ) {
  var $list = $( "#item-list" ).empty();

  items.forEach(function( item ) {
    $list.append(
      $( "<li>" ).text( item.name ).data( "id", item.id )
    );
  });
}

renderItems( [
  { id: 1, name: "Alpha" },
  { id: 2, name: "Beta" }
] );

Old <li> elements removed from #item-list
Two new items appended with .data("id", …)

Re-render on filter/sort without duplicating rows

🚀 Common Use Cases

• Ajax panels — clear a container before injecting server HTML or JSON-rendered markup.
• Table bodies — $("#results tbody").empty() before rendering paginated rows.
• Dynamic lists — rebuild todo, cart, or notification lists from fresh data arrays.
• Form reset areas — wipe dynamically added form fields inside a wrapper without removing the wrapper.
• Widget shells — keep a styled container div and swap inner content on theme or layout changes.
• Error cleanup — remove stale validation messages inside a form section before re-validating.

📝 Notes

• Available since jQuery 1.0 — one of the earliest DOM manipulation methods.
• Takes no arguments; there is no selector filter like .detach( selector ).
• Removes text nodes as well as element children — inline text counts as a child node.
• Parent attributes, id, class, and jQuery data on the matched element are preserved.
• jQuery cleans up child event handlers and data before removal to avoid memory leaks.
• Use .detach() on children if you need to preserve their jQuery state for reinsertion.
• .html("") also clears children but parses HTML strings; .empty() is clearer when you only need to wipe content.

💡 Best Practices