HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove vs detach</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 520px; }
    .box { padding: 12px; margin: 8px 0; border-radius: 6px; border: 2px solid #cbd5e1; }
    #box-a { background: #fee2e2; }
    #box-b { background: #dcfce7; }
    button { margin-right: 8px; margin-top: 8px; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #btn-remove { background: #dc2626; }
    #btn-detach { background: #059669; }
    #log { margin-top: 12px; padding: 10px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font-family: monospace; font-size: 13px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <div id="box-a" class="box">Box A — will be .remove()d</div>
  <div id="box-b" class="box">Box B — will be .detach()ed</div>
  <button type="button" id="btn-remove">Remove #box-a</button>
  <button type="button" id="btn-detach">Detach #box-b</button>
  <div id="log">Both boxes have .data("score", 42). Click a button to compare.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#box-a").data("score", 42);
    $("#box-b").data("score", 42);

    $("#btn-remove").on("click", function() {
      $("#box-a").remove();
      $("#log").text("#box-a removed — element and jQuery data gone from DOM.");
    });

    $("#btn-detach").on("click", function() {
      var detached = $("#box-b").detach();
      $("#log").text("#box-b detached — data still accessible: score = " + detached.data("score"));
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .remove() vs .detach() — data cleanup (Try It)