jQuery .empty(): Clear Content and Keep the Container

jQuery Reference

.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 Reference

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

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 .remove(): Remove Elements, Data, and Events

Remove selected elements and their descendants, understand selector filtering, and compare empty and detach for reuse.

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 .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.

jQuery .empty(): Clear Content and Keep the Container

Clear a container’s elements and text without deleting it, refill it, and understand how field values and event handlers differ.

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 .has(): Select Elements with Matching Descendants

Filter the original selection by matching descendants, and see why has and find return different elements.