Theory
Robo Race cancelled છે
Rain. committee Robo Race ને cancel કરે છે, અને તેનું card 200 open browsers ના pages માંથી vanish થવું જોઈએ.
Meanwhile 2 other cleanups queue up: search feature ને list ને CLEAR કરવાની અને matches સાથે refill કરવાની જરૂર છે, અને fest પછી, festive highlight frames ને જવું પડે જ્યારે cards themselves stay.
ત્રણ different demolitions: આખું card, ફક્ત contents, ફક્ત wrapper. jQuery એક method ને ship કરે છે દરેક level માટે, અને mixing them up wrong thing ને delete કરે છે.
Theory
parcel સાથે deal કરવાની ત્રણ રીતો
remove() એ parcel ને discarding છે: box, contents, address label, gone.
empty() એ contents ને tip out કરીને box ને keeping છે: તે ત્યાં sits કરે છે, labelled અને refill માટે ready.
unwrap() એ gift wrapping ને tearing off છે: અંદરનું parcel exactly જ્યાં હતું ત્યાં stands કરે છે, એક layer barer.
Element, contents, parent: દરેક method exactly એક layer પર attack કરે છે.
At a glance
3 removal levels
| Method | શું dies | શું survives |
|---|---|---|
| remove() | matched element + તેના ALL contents | તેનો parent અને siblings |
| empty() | ફક્ત CONTENTS (children, text) | element itself, empty shell તરીકે |
| unwrap() | matched element નો direct PARENT | element, એક level up 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, refill માટે ready
$("#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 ને CLEARED કરવા માંગો છો જેથી search results તેને refill કરી શકે. classmate $("#eventList").remove() લખે છે. શું actually થાય છે?
- list ના items vanish અને empty ul new content ની wait કરે છે
- આખું ul disappears: પછી #eventList પર appends કંઈ શોધતા નથી અને કંઈ કરતા નથી
- ફક્ત first item remove થાય છે
- Nothing: remove() ને selector argument ની જરૂર છે
Show the answer
આખું ul disappears: પછી #eventList પર appends કંઈ શોધતા નથી અને કંઈ કરતા નથી
remove() matched element ITSELF ને demolish કરે છે, ul અને all: refill પછી selector માં append કરે છે જે કંઈ match નથી કરતું, silently: classic wrong-level bug જે આ pair test કરવા માટે exists કરે છે. clear-for-refilling job એ empty() ને wanted હતું, જે items ને tips out કરે છે અને shell ને standing leave કરે છે. Option C એક-at-a-time behaviour ને invent કરે છે જે કોઈ removal method પાસે નથી. Option D અડધું-remembered છે: remove() filtering selector ને લઈ શકે છે ($(".card").remove(".soldout")), પણ એક વગર તે દરેક match ને happily remove કરે છે. Level check before demolition: element, contents, અથવા parent?
Think first
inverse pair
Last lesson દરેક featured card ને highlight div માં wrap કર્યું. listing ના structure પર $(".featured").unwrap() ને trace કરો: શું exactly div, card, અને card ની position સાથે થાય છે?
Show the answer
unwrap દરેક matched card ના direct parent (highlight div) ને look કરે છે, તે parent ને delete કરે છે, અને card ને તેની place માં promote કરે છે: card હવે directly ul માં sits કરે છે, exactly જ્યાં div stood હતું: position preserved, એક layer removed. wrap અને unwrap true inverses છે: એક run કરો પછી બીજું અને DOM પાછું ત્યાં જ છે જ્યાં start થયું હતું. Caution worth carrying: unwrap check નથી કરતું કે parent શું છે: unwrapped card પર તે happily ul ને itself next delete કરી શકે છે: promote કરતા પહેલાં structure ને know કરો.
Watch out
Removal fine print
remove() handlers ને તેની સાથે લઈ જાય છે: removed card ના click handlers તેની સાથે die થાય છે; equivalent HTML ને later re-appending કરવું એ NEW element આપે છે જેને handlers ફરીથી wired કરવાની જરૂર છે.
wrong target પર empty(): $("body").empty() એ one typo away છે blank site થી: mass demolition પહેલાં selector ને check કરો.
unwrap() blind છે: તે whatever direct parent happen થાય છે તેને remove કરે છે, structural અથવા precious: તે remember નથી કરતું કે wrap() એ શું add કર્યું.
Theory
refresh pattern
empty-then-append એ standing pattern છે કોઈ પણ list માટે જે reload થાય છે: search results, filtered schedules, અને, Unit 4 થી onward, server responses: shell ને clear કરો, fresh data ને loop કરો, દરેક item ને append કરો. તમે હવે jQuery નો full manipulation kit hold કરો છો: select, read, write, insert, remove. એક member બાકી છે, small અને constantly used: script થી styling css() સાથે, જે આ unit ને next close કરે છે.
Summary
Key takeaways
- remove() matched element ને delete કરે છે all contents અને handlers સાથે; parent survive કરે છે.
- empty() ફક્ત contents ને delete કરે છે; element refillable shell તરીકે remains કરે છે.
- unwrap() દરેક match ના direct parent ને delete કરે છે અને element ને promote કરે છે: wrap નું exact inverse.
- remove(selector) filter કરે છે કે કયા matches die થાય છે.
- clear-and-refill lists ને empty() પછી append() સાથે: refresh pattern જે AJAX reuse કરશે.
- Removed elements તેમના event handlers ને તેમની સાથે લઈ જાય છે.
- Memory hook: parcel ને remove કરો, box ને empty કરો, wrapping ને unwrap કરો.