Theory
Robo Race is cancelled
Rain. The committee cancels Robo Race, and its card must vanish from 200 open browsers' pages.
Meanwhile 2 other cleanups queue up: the search feature needs to CLEAR the list and refill it with matches, and after the fest, the festive highlight frames must go while the cards themselves stay.
Three different demolitions: the whole card, only the contents, only the wrapper. jQuery ships one method per level, and mixing them up deletes the wrong thing.
Theory
Three ways to deal with a parcel
remove() is discarding the parcel: box, contents, address label, gone.
empty() is tipping the contents out and keeping the box: it sits there, labelled and ready to refill.
unwrap() is tearing off the gift wrapping: the parcel inside stands exactly where it was, one layer barer.
Element, contents, parent: each method attacks exactly one layer.
At a glance
The 3 removal levels
| Method | What dies | What survives |
|---|---|---|
| remove() | The matched element + ALL its contents | Its parent and siblings |
| empty() | Only the CONTENTS (children, text) | The element itself, as an empty shell |
| unwrap() | The matched element's direct PARENT | The element, promoted one level up |
Practical
Three cleanups on the fest page
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#cancelBtn").click(function() {
$("#robo").remove(); // card + contents: gone
});
$("#searchBtn").click(function() {
$("#eventList").empty(); // shell stays, ready to refill
$("#eventList").append("<li>Garba Night</li>");
});
$("#festOver").click(function() {
$(".featured").unwrap(); // highlight divs die, cards stay
});
});
</script>
</head>
<body>
<button id="cancelBtn">Cancel Robo Race</button>
<button id="searchBtn">Search: garba</button>
<button id="festOver">Fest over</button>
<ul id="eventList">
<div class="highlight"><li class="featured">Garba Night</li></div>
<li>Coding Contest</li>
<li id="robo">Robo Race</li>
</ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
You want the event list CLEARED so search results can refill it. A classmate writes $("#eventList").remove(). What actually happens?
- The list's items vanish and the empty ul waits for new content
- The entire ul disappears: later appends to #eventList find nothing and do nothing
- Only the first item is removed
- Nothing: remove() needs a selector argument
Show the answer
The entire ul disappears: later appends to #eventList find nothing and do nothing
remove() demolishes the matched element ITSELF, ul and all: the refill then appends into a selector that matches nothing, silently: the classic wrong-level bug this pair exists to test. The clear-for-refilling job wanted empty(), which tips out the items and leaves the shell standing. Option C invents a one-at-a-time behaviour no removal method has. Option D is half-remembered: remove() CAN take a filtering selector ($(".card").remove(".soldout")), but without one it happily removes every match. Level check before demolition: element, contents, or parent?
Think first
The inverse pair
Last lesson wrapped each featured card in a highlight div. Trace $(".featured").unwrap() on the listing's structure: what exactly happens to the div, the card, and the card's position?
Show the answer
unwrap looks at each matched card's direct parent (the highlight div), deletes that parent, and promotes the card into its place: the card now sits directly in the ul, exactly where the div stood: position preserved, one layer removed. wrap and unwrap are true inverses: run one then the other and the DOM is back where it started. Caution worth carrying: unwrap does not check WHAT the parent is: on an unwrapped card it would happily delete the ul itself next: know the structure before promoting.
Watch out
Removal fine print
remove() takes handlers with it: a removed card's click handlers die with it; re-appending equivalent HTML later gives a NEW element that needs handlers wired again.
empty() on the wrong target: $("body").empty() is one typo away from a blank site: check the selector before mass demolition.
unwrap() is blind: it removes whatever the direct parent happens to be, structural or precious: it does not remember what wrap() added.
Theory
The refresh pattern
empty-then-append is the standing pattern for any list that reloads: search results, filtered schedules, and, from Unit 4 onward, server responses: clear the shell, loop the fresh data, append each item. You now hold jQuery's full manipulation kit: select, read, write, insert, remove. One member remains, small and constantly used: styling from script with css(), which closes this unit next.
Summary
Key takeaways
- remove() deletes the matched element with all contents and handlers; the parent survives.
- empty() deletes only the contents; the element remains as a refillable shell.
- unwrap() deletes each match's direct parent and promotes the element: wrap's exact inverse.
- remove(selector) filters which matches die.
- Clear-and-refill lists with empty() then append(): the refresh pattern AJAX will reuse.
- Removed elements take their event handlers with them.
- Memory hook: remove the parcel, empty the box, unwrap the wrapping.