jQuery .remove(): Remove Elements, Data, and Events

jQuery Reference

.remove() removes matched elements and their descendants from the document. It also clears their jQuery data and event handlers; consider .detach() if the nodes will be reused with that state intact.

Syntax and behavior

$(".item").remove();
$(".item").remove(".obsolete");

An optional selector filters the current collection before removal; it does not search the entire document again. The returned jQuery object still refers to the original selection, but its removed nodes have had their jQuery data cleaned. Use .empty() when you want to retain a container and remove only its contents.

The official jQuery .remove() 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 remove 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">
  <p class="item obsolete">Obsolete item</p>
  <p class="item">Item to keep</p>
</div>
<button id="remove" type="button">Remove obsolete items</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#remove").on("click", function () {
        $(".item").remove(".obsolete");
        $("#output").text("Remaining items: " + $("#container .item").length);
      });
    });
  </script>
</body>
</html>

Expected result

Clicking Remove obsolete items deletes only Obsolete item. Item to keep and its container remain. The output is Remaining items: 1. Clicking again removes nothing further because no item matches the condition.

Important details and troubleshooting

.remove(".obsolete") filters the selected elements themselves. To remove only obsolete descendants of a selected container, use .find(".obsolete").remove().
Use .hide() or a class if the goal is to hide content temporarily. CSS cannot make a node reappear after it has been removed from the document.
For restoration, retain the required content and position before removal or render the content again. Use .detach() when preserving jQuery events and data for reinsertion.

Compare the behavior with .empty() and container preservation.

jQuery Reference

jQuery .has(): Select Elements with Matching Descendants

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

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.

jQuery .wrapAll(): Put Selected Elements in One Wrapper

Collect selected elements into one wrapper and inspect how separated siblings move, including the limits of unwrapping.

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 .width(): Measure and Set Content Width

Compare content, padding, and border widths, and verify how width getters and setters behave with border-box sizing.

jQuery .add(): Combine Element Selections

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

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

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 .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.