Elements हटाना और Detach करना
In this page:
$(selector).remove();
$(selector).empty();
$(selector).detach();remove()
remove() method selected element को पूरी तरह delete कर देता है, उसके children, text, और किसी भी attached data या event handlers सहित। एक बार हट जाने के बाद, element DOM से चला जाता है और उसका jQuery data recover नहीं किया जा सकता।
उदाहरण: remove()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">To remove</div>
<script>
$("#box").remove();
</script>
</body>
</html>empty()
empty() selected element के contents -- उसके child nodes और text -- को हटा देता है लेकिन element को खुद DOM में रखता है। यह किसी container को साफ़ करने के लिए उपयोगी है, जैसे किसी search results list को नए content से भरने से पहले।
उदाहरण: empty()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="results"><li>Old 1</li><li>Old 2</li></ul>
<script>
$("#results").empty();
</script>
</body>
</html>detach()
detach() किसी element को DOM से हटाता है जबकि उसका jQuery data और event handlers memory में intact रखता है। यह इसे सही choice बनाता है जब आप बाद में उसी element को फिर से insert करने की योजना बना रहे हों और उसकी bound behavior खोना नहीं चाहते।
उदाहरण: detach()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Detach me</div>
<script>
const saved = $("#box").detach();
// saved can be reinserted later with its data/handlers intact
</script>
</body>
</html>Selector से हटाना
आप remove() को एक selector pass कर सकते हैं ताकि आपकी पूरी selection में से सिर्फ matching elements ही delete हों, जो भी आपने select किया है उन सबको नहीं। यह आपको पहले एक अलग selection लिखे बिना यह filter करने देता है कि क्या delete होगा।
उदाहरण: Remove by Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li class="done">Task 1</li><li>Task 2</li></ul>
<script>
$("#list li").remove(".done");
</script>
</body>
</html>Remove या Empty
remove() इस्तेमाल करें जब element को खुद page से पूरी तरह गायब होना चाहिए। empty() इस्तेमाल करें जब सिर्फ उसका content गायब हो लेकिन container को खुद अपनी जगह रहना चाहिए, फिर से भरे जाने के लिए तैयार।
उदाहरण: Remove or Empty
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="container"><p>Old content</p></div>
<script>
$("#container").empty();
// use remove() instead if the container itself should also disappear
</script>
</body>
</html>- जब आप element को वापस रखने की योजना बना रहे हों तब
.remove()इस्तेमाल करना, क्योंकि यह उसका data और event handlers delete कर देता है;.detach()उन्हें रखता है। - किसी list को साफ़ करने के लिए उस पर
.remove()call करना, जब<ul>खुद गायब हो जाता है और.empty()इसे बनाए रखता है। - यह उम्मीद करना कि
.empty()element के अपने attributes या element को खुद हटा देगा, जबकि यह सिर्फ अंदर के children और text को साफ़ करता है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: