jQuery Removing Elements
Distinguish remove, empty and detach before temporarily taking a feature out of the document.
How it works
remove deletes matched elements and cleans their jQuery-managed data and handlers. empty clears descendants while keeping the selected container. detach takes nodes out while retaining their data and handlers for reinsertion. This example detaches a small button row and reattaches it, then proves its existing handler still works. That is a specific temporary-removal contract rather than a recommendation to keep every discarded node forever.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Choose Whether Removal Should Preserve a Node’s State</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<section id="holder"><button id="read">Read notice</button></section>
<button id="move">Detach and restore</button><output>Reads: 0</output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
let reads = 0;
$('#read').on('click', function () {
$('output').text('Reads: ' + ++reads);
});
$('#move').on('click', function () {
const $row = $('#read').detach();
$('#holder').append($row);
});
});
</script>
</body>
</html>
Expected result
After Detach and restore, Read notice still increments the count.
If the feature is truly finished, release retained references and use its teardown contract rather than keeping detached subtrees in a global collection. Repeated append does not create a new copy when moving this one existing node. Native removal and jQuery cleanup have different ownership implications, especially when old plugins attach data or listeners outside the element.
Use jQuery’s official API documentation for exact method and return contracts.