Elements हटाना और Detach करना
remove() selected element और उसके contents को delete करता है।
In this page:
Syntax
$(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>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Run remove()</button><button id="resetBtn" class="secondary">Reset</button>
<div id="stage" class="stage" data-label="Stage (stays on the page)"><div id="box" class="item">To remove</div></div>
<div id="output"></div>
<script>
var orig = $("#stage").html();
function report() { $("#output").text("#box elements on the page: " + $("#box").length); }
report();
$("#runBtn").click(function () {
$("#box").remove();
report();
});
$("#resetBtn").click(function () {
$("#stage").html(orig);
report();
});
</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>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Run empty()</button><button id="resetBtn" class="secondary">Reset</button>
<ul id="results" class="stage" data-label="#results (the list itself stays)"><li>Old 1</li><li>Old 2</li></ul>
<div id="output"></div>
<script>
var orig = $("#results").html();
function report() { $("#output").text("#results exists: " + ($("#results").length > 0) + ", items inside: " + $("#results li").length); }
report();
$("#runBtn").click(function () {
$("#results").empty();
report();
});
$("#resetBtn").click(function () {
$("#results").html(orig);
report();
});
</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>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Run detach()</button><button id="attachBtn" class="secondary">Re-attach</button><button id="resetBtn" class="secondary">Reset</button>
<div id="stage" class="stage" data-label="Stage"><div id="box" class="item">Detach me</div></div>
<div id="output"></div>
<script>
var orig = $("#stage").html();
var saved = null;
function report() { $("#output").text("#box in the page: " + $("#box").length + (saved ? " | kept in memory: yes (saved)" : "")); }
report();
$("#runBtn").click(function () {
if ($("#box").length) saved = $("#box").detach();
report();
});
$("#attachBtn").click(function () {
if (saved) { $("#stage").append(saved); saved = null; }
report();
});
$("#resetBtn").click(function () {
saved = null;
$("#stage").html(orig);
report();
});
</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>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Run remove(".done")</button><button id="resetBtn" class="secondary">Reset</button>
<ul id="list" class="stage" data-label="#list"><li class="done">Task 1 (.done)</li><li>Task 2</li></ul>
<div id="output"></div>
<script>
var orig = $("#list").html();
function report() { $("#output").text("Items in #list: " + $("#list li").length); }
report();
$("#runBtn").click(function () {
$("#list li").remove(".done");
report();
});
$("#resetBtn").click(function () {
$("#list").html(orig);
report();
});
</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>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="emptyBtn">empty() the container</button><button id="removeBtn">remove() the container</button><button id="resetBtn" class="secondary">Reset</button>
<div id="wrap">
<div id="container" class="stage" data-label="#container"><p class="item">Old content</p></div>
</div>
<div id="output"></div>
<script>
var orig = $("#wrap").html();
function report() { $("#output").text("#container on the page: " + $("#container").length + ", children inside it: " + $("#container").children().length); }
report();
$("#emptyBtn").click(function () {
$("#container").empty();
report();
});
$("#removeBtn").click(function () {
$("#container").remove();
report();
});
$("#resetBtn").click(function () {
$("#wrap").html(orig);
report();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- जब आप 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: