Removing and Detaching Elements
remove() deletes the selected element and its contents.
In this page:
Syntax
$(selector).remove();
$(selector).empty();
$(selector).detach();remove()
The remove() method deletes the selected element completely, along with its children, text, and any attached data or event handlers. Once removed, the element is gone from the DOM and its jQuery data can't be recovered.
Example: 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() removes the contents of the selected element -- its child nodes and text -- but keeps the element itself in the DOM. This is useful for clearing out a container, like a search results list, before filling it with new content.
Example: 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() removes an element from the DOM while keeping its jQuery data and event handlers intact in memory. This makes it the right choice when you plan to reinsert the same element later and don't want to lose its bound behavior.
Example: 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>Remove by Selector
You can pass a selector to remove() to delete only the matching elements out of a larger selection, rather than every element you've selected. This lets you filter what gets deleted without writing a separate selection first.
Example: 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 or Empty
Use remove() when the element itself should disappear entirely from the page. Use empty() when only its contents should disappear but the container itself needs to stay in place, ready to be filled again.
Example: 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. #}
Common Mistakes
- Using
.remove()when you plan to put the element back, since it deletes its data and event handlers;.detach()keeps them. - Calling
.remove()on the list to clear it, when the<ul>itself disappears and.empty()keeps it. - Expecting
.empty()to remove the element's own attributes or the element itself, when it only clears the children and text inside.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: