jQuery .remove() Method

What You’ll Learn

The .remove() method deletes matched elements from the DOM permanently — the nodes themselves and all descendants are gone, and jQuery cleans up associated data and event handlers. This tutorial covers syntax and optional selector filter since 1.0, comparisons with .detach() and .empty(), the official remove demos, and five practical try-it examples.

Introduction

Interactive pages constantly add and delete UI pieces — dismiss a notification, delete a todo row, close a modal, or strip outdated markup after an Ajax update. When an element should leave the document for good, jQuery provides .remove().

Available since jQuery 1.0, .remove() takes matched elements out of the DOM tree entirely. Unlike .empty(), which clears children but keeps the parent, .remove() deletes the matched nodes themselves along with everything nested inside them. Unlike .detach(), which preserves jQuery data and event handlers for reinsertion, .remove() actively cleans up those associations to prevent memory leaks.

Pass an optional selector to filter which elements in the collection are removed. Use .detach() when you plan to reinsert nodes later; use .empty() when you only need to wipe inner content. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .remove() Method

.remove([selector]) removes matched elements from the DOM and returns the same jQuery collection. The nodes are disconnected from their parent and no longer appear on screen. All descendant elements inside removed nodes disappear as well.

jQuery also erases event handlers bound with .on() and clears .data() entries for removed elements. This cleanup is intentional — once removed, those nodes are not expected to return. Pass an optional selector to limit removal to elements in the collection that also match the filter string.

📝 Syntax

jQuery .remove() supports two forms:

Remove all matched elements — since 1.0

.remove()

• Removes every matched element and its descendants from the DOM.
• Cleans up jQuery data and event handlers on removed nodes.

Remove with selector filter — since 1.0

.remove( selector )

• selector — only elements in the collection that also match are removed.
• Equivalent to .filter( selector ).remove() in one call.

Return value

• Returns the same jQuery collection that was removed.
• Removed elements are no longer in the document — re-querying by ID may fail.

Official remove patterns

The jQuery API documentation includes two button-click demos:

$( "button" ).on( "click", function() {
  $( "p" ).remove();
} );

$( "button" ).on( "click", function() {
  $( "p" ).remove( ":contains('Hello')" );
});

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

$( "button" ).on( "click", function() {
  $( "p" ).remove();
} );

Click button → all <p> elements deleted from DOM
Paragraph tags no longer exist in the document
Unlike .empty(), nothing remains behind

$( "button" ).on( "click", function() {
  $( "p" ).remove( ":contains('Hello')" );
});

"Hello" paragraph deleted
"how are" and "you?" paragraphs remain

Same result as $("p").filter(":contains('Hello')").remove()

$( "#box-a" ).data( "score", 42 );
$( "#box-a" ).remove();
// $.data on #box-a is gone — element discarded

$( "#box-b" ).data( "score", 42 );
var detached = $( "#box-b" ).detach();
console.log( detached.data( "score" ) ); // 42

#box-a removed → data cache cleaned up
#box-b detached → detached.data("score") still 42

Use remove when nodes will never return

$( "#todo-list" ).on( "click", ".delete-btn", function() {
  $( this ).closest( "li" ).remove();
});

Click × on a row → that <li> removed from DOM
Other rows unaffected
Event delegation on #todo-list keeps working for remaining rows

$( ".toast .close" ).on( "click", function() {
  $( this ).closest( ".toast" ).fadeOut( 200, function() {
    $( this ).remove();
  });
});

Toast fades out over 200ms
.remove() in fadeOut callback deletes the node from DOM
Handlers and data cleaned up — no ghost references

🚀 Common Use Cases

• Todo lists — delete individual rows when the user marks items complete or clicks remove.
• Toast notifications — dismiss alerts permanently after the user closes them or a timer fires.
• Modal cleanup — remove overlay and dialog markup after close instead of hiding with CSS.
• Filtered removal — $(".item").remove(".expired") deletes only expired entries.
• Ajax error states — strip stale error banners before showing a fresh message.
• Dynamic form fields — remove an added input group when the user clicks “Remove field.”

📝 Notes

• Available since jQuery 1.0 — optional selector filter included from the start.
• Removes matched elements themselves, not just their children (contrast with .empty()).
• All descendant nodes inside removed elements are deleted as well.
• jQuery cleans up event handlers and .data() to prevent memory leaks.
• Use .detach() when you plan to reinsert nodes with events intact.
• Removed elements cannot be re-queried by selector — they no longer exist in the document.
• .remove( selector ) is shorthand for .filter( selector ).remove().

💡 Best Practices