remove()?.remove([selector]) takes matched elements out of the DOM — the elements themselves and everything inside them (since jQuery 1.0). Bound events and jQuery data are removed too.
$(".hello").remove()
$("div").remove(".hello") // filter
$("p").remove(":contains('Hello')")
// delete the element itself
// keep parent, clear children → .empty()
// remove but keep data/events → .detach()remove()Select the nodes to delete, optionally filter, then call remove.
.remove() — nodes leave the document.| Piece | Required? | Role |
|---|---|---|
| jQuery collection | Yes | Elements to remove |
selector | Optional | Filter which matched items are removed |
| Return | — | Same collection (now out of the document) |
set = matched elements
if selector given:
set = set filtered by selector
for each element in set:
clear jQuery data and events
remove element (and children) from the DOM
return set
// Official idea:
$(".hello").remove()
$("div").remove(".hello") // same effect hereKeep these facts handy while deleting nodes.
| Topic | Detail |
|---|---|
| Syntax | .remove([selector]) |
| Since | jQuery 1.0 |
| Deletes | Element + descendants |
| Data / events | Cleaned up |
vs .empty() | Deletes self vs clears children only |
vs .detach() | Discards vs keeps jQuery state |
| Filter | Optional selector argument |
Run official-style remove actions on a tiny demo tree and see which nodes disappear.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Delete every element with class hello from the document.
// <div class="hello">Hello</div>
// <div class="goodbye">Goodbye</div>
$(".hello").remove();$(".hello") finds the Hello div.Start from all divs, then remove only those that match .hello.
// same HTML as Example 1
$("div").remove(".hello");
// same idea as: $("div").filter(".hello").remove();$("div") matches both siblings.".hello" keeps only the Hello div for removal.$(".hello").remove() here.:contains FilterRemove only paragraphs that contain the text Hello.
// <p>Hello</p><p>how are you?</p>
$("p").remove(":contains('Hello')");
// analogous to: $("p").filter(":contains('Hello')").remove();<p> elements match first.:contains('Hello') keeps only the first..filter().remove().remove vs emptyDelete the box itself, or keep the box and clear its children.
// <div id="box"><span>Item</span></div>
$("#box").empty(); // <div id="box"></div> remains
$("#box").remove(); // #box is gone from the document.detach().Check these before deleting nodes in real pages.
Handlers and .data() are gone. Use .detach() if you plan to reinsert.
Removing a parent removes nested content. To keep the parent, use .empty().
$("div").remove(".hello") only removes divs that also match .hello.
After remove, a normal selector will not find those nodes again.
.remove() is a core jQuery method (since 1.0). It needs a browser DOM with jQuery loaded.
Works in Chrome, Firefox, Safari, Edge, and other browsers with jQuery. Not for Node.js without a DOM.
Bottom line: Use .remove() in the browser to delete elements permanently. Prefer .detach() when you need to put them back with data intact.
| Approach | Cost | Best for |
|---|---|---|
.remove() | Low–moderate | Permanent deletion + cleanup |
.empty() | Similar | Clearing a container you will reuse |
.detach() | Similar | Temporary removal with state kept |
Prefer one targeted remove over many tiny deletes in a loop when you can. Removing large subtrees also cleans nested jQuery data — that is intentional, not wasted work.
One line: $el.remove() deletes the element for good — including children, data, and events.
Learn how to remove the parents of matched elements while keeping the children.
9 people found this page helpful