jQuery — Remove Elements

remove()

Remove elements from the DOM (and their data/events):

$("p").remove();
$(".old-item").remove();

remove() with Selector

$("li").remove(".inactive");

empty()

Remove child elements and content (keep the element):

$("div").empty();

detach()

Remove but keep jQuery data and events:

var $item = $("li").detach();
// Later...
$("ul").append($item);

Practical: Delete Button

$(".delete-btn").click(function() {
    $(this).closest("tr").fadeOut(300, function() {
        $(this).remove();
    });
});

remove vs empty vs detach

Method	Element	Data/Events	Return
remove()	Deleted	Deleted	Nothing
empty()	Kept	Children deleted	Nothing
detach()	Deleted	Kept	jQuery object

Removing Specific Items

// Remove by content
$("li").filter(":contains('old')").remove();

// Remove all except first
$("li:gt(0)").remove();

Mini Practice

1. Remove an element on click
2. Empty a container's contents
3. Detach and reattach an element
4. Remove elements by filter

Up Next

Continue with CSS Classes — adding, removing, and toggling classes.