Theory
Robo Race Cancel हो गया
Rain। Committee Robo Race cancel करती है, और इसका card 200 open browsers के pages से vanish होना चाहिए।
इस बीच 2 और cleanups queue होते हैं: search feature को list को CLEAR करके matches से refill करना है, और fest के बाद, festive highlight frames को जाना है जबकि cards खुद रहें।
तीन अलग demolitions: पूरा card, सिर्फ़ contents, सिर्फ़ wrapper। jQuery हर level के लिए एक method ship करता है, और इन्हें mix up करना ग़लत चीज़ delete कर देता है।
Theory
एक Parcel के साथ Deal करने के तीन तरीके
remove() parcel discard करना है: box, contents, address label, gone।
empty() contents tip out करना और box रखना है: यह वहीं बैठा है, labelled और refill के लिए ready।
unwrap() gift wrapping को फाड़ना है: अंदर वाला parcel exactly वहीं खड़ा है जहाँ था, एक layer barer।
Element, contents, parent: हर method exactly एक layer पर attack करता है।
At a glance
3 Removal Levels
| Method | क्या मरता है | क्या Survive करता है |
|---|---|---|
| remove() | Matched element + इसके सारे contents | इसका parent और siblings |
| empty() | सिर्फ़ CONTENTS (children, text) | Element खुद, एक empty shell की तरह |
| unwrap() | Matched element का direct PARENT | Element, एक level ऊपर promoted |
Practical
Fest Page पर तीन Cleanups
<!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
आप चाहते हैं event list CLEAR हो ताकि search results इसे refill कर सकें। एक classmate $("#eventList").remove() लिखता है। असल में क्या होता है?
- List के items vanish हो जाते हैं और empty ul नए content का wait करता है
- पूरा ul disappear हो जाता है: बाद में #eventList में appends को कुछ नहीं मिलता और कुछ नहीं होता
- सिर्फ़ पहला item remove होता है
- कुछ नहीं: remove() को एक selector argument चाहिए
Show the answer
पूरा ul disappear हो जाता है: बाद में #eventList में appends को कुछ नहीं मिलता और कुछ नहीं होता
remove() matched element को खुद demolish कर देता है, ul सहित सब: refill फिर एक ऐसे selector में append करता है जो कुछ match नहीं करता, चुपचाप: वह classic wrong-level bug जिसे test करने के लिए यह pair exist करता है। Clear-for-refilling job को empty() चाहिए था, जो items tip out करता है और shell खड़ा छोड़ देता है। Option C एक one-at-a-time behaviour invent करता है जो किसी भी removal method के पास नहीं है। Option D half-remembered है: remove() एक filtering selector ले सकता है ($(".card").remove(".soldout")), पर बिना किसी के यह happily हर match remove कर देता है। Demolition से पहले level check: element, contents, या parent?
Think first
Inverse Pair
पिछले lesson ने हर featured card को एक highlight div में wrap किया। Listing के structure पर $(".featured").unwrap() trace कीजिए: div, card, और card की position के साथ exactly क्या होता है?
Show the answer
unwrap हर matched card के direct parent (highlight div) को देखता है, उस parent को delete करता है, और card को इसकी जगह promote करता है: card अब directly ul में बैठता है, exactly वहीं जहाँ div खड़ा था: position preserved, एक layer removed। wrap और unwrap असली inverses हैं: एक run कीजिए फिर दूसरा और DOM वहीं वापस है जहाँ यह शुरू हुआ था। Caution जो carry करने लायक है: unwrap check नहीं करता parent WHAT है: एक unwrapped card पर यह अगली बार happily खुद ul delete कर देगा: promote करने से पहले structure जानिए।
Watch out
Removal की Fine Print
remove() Handlers अपने साथ ले जाता है: एक removed card के click handlers इसके साथ मरते हैं; बाद में equivalent HTML re-append करना एक NEW element देता है जिसे handlers फिर से wire करने पड़ते हैं।
ग़लत Target पर empty(): $("body").empty() एक blank site से एक typo दूर है: mass demolition से पहले selector check कीजिए।
unwrap() Blind है: यह जो भी direct parent हो उसे remove करता है, structural हो या precious: यह याद नहीं रखता wrap() ने क्या add किया था।
Theory
Refresh Pattern
empty-then-append किसी भी reload होने वाली list के लिए standing pattern है: search results, filtered schedules, और, Unit 4 से आगे, server responses: shell clear कीजिए, fresh data loop कीजिए, हर item append कीजिए। अब आपके पास jQuery की पूरी manipulation kit है: select, read, write, insert, remove। एक member बाकी है, छोटा और constantly इस्तेमाल होता है: script से styling css() के साथ, जो अगली बार इस unit को बंद करता है।
Summary
Key takeaways
- remove() सारे contents और handlers सहित matched element delete करता है; parent survive करता है।
- empty() सिर्फ़ contents delete करता है; element एक refillable shell की तरह रहता है।
- unwrap() हर match का direct parent delete करता है और element को promote करता है: wrap का exact inverse।
- remove(selector) filter करता है कौन से matches मरते हैं।
- empty() फिर append() से lists clear-and-refill कीजिए: refresh pattern जो AJAX reuse करेगा।
- Removed elements अपने event handlers अपने साथ ले जाते हैं।
- Memory hook: parcel remove कीजिए, box empty कीजिए, wrapping unwrap कीजिए।