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 .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 .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 .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 .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 .find(): Select Matching Descendants

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

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 .wrap(): Wrap Each Element Separately

Give each selected element its own wrapper, check the returned selection, and avoid duplicate IDs or repeated nesting.

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 .removeAttr(): Delete HTML Attributes

Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.

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

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