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

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

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

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

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 .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

jQuery .has(): Select Elements with Matching Descendants

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

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

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 .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .removeAttr(): Delete HTML Attributes

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