jQuery DOM Removal and Replacement

Removing or replacing DOM elements is as important as adding them. jQuery gives you surgical control: you can strip content, remove entire elements, empty containers, or swap elements for new ones — all while deciding whether to preserve attached event handlers and data.

Removing Elements

.remove() deletes the matched elements from the DOM and unbinds all jQuery event handlers and data associated with them. .detach() does the same but keeps the internal jQuery data intact, making it the right choice when you intend to reinsert the element later.

Emptying Containers

.empty() removes all child nodes and text from the matched elements but leaves the elements themselves in place. Use it to clear a list or table before repopulating it.

Replacing Elements

.replaceWith(content) replaces matched elements with new content. .replaceAll(target) is the content-centric equivalent.

.remove() — delete element and unbind events
.detach() — delete element, keep jQuery data
.empty() — clear children, keep container
.replaceWith() — swap element for new content

Example

// Remove a notification banner
$('#flash-message').remove();

// Detach for later reinsertion
var $panel = $('#side-panel').detach();
// ... do some work ...
$('#main').append($panel); // handlers still work

// Empty a results list before refilling
$('#results').empty();

// Replace a placeholder with real content
$('#skeleton-card').replaceWith(
    '<div class="card"><h3>Real Title</h3></div>'
);

// Remove only checked items from a list
$('input:checked').closest('li').remove();

JAVASCRIPT

Full Editor

Pro Tip

Always use .detach() over .remove() when the element will be reinserted to preserve event handlers.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned