HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data vs remove</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 520px; }
    .box { padding: 12px; margin: 8px 0; border-radius: 6px; }
    #box-a { background: #dbeafe; border: 2px solid #2563eb; }
    #box-b { background: #fee2e2; border: 2px solid #dc2626; }
    button { margin: 6px 6px 6px 0; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #detach-btn { background: #2563eb; }
    #remove-btn { background: #dc2626; }
    #log { margin-top: 12px; font-family: ui-monospace, monospace; font-size: 13px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <div id="box-a" class="box">Box A — will detach</div>
  <div id="box-b" class="box">Box B — will remove</div>
  <button type="button" id="detach-btn">Detach A &amp; read data</button>
  <button type="button" id="remove-btn">Remove B</button>
  <div id="log"></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);
    $("#detach-btn").on("click", function() {
      var detached = $("#box-a").detach();
      $("#log").append("detached.data('score'): " + detached.data("score") + "\n");
    });
    $("#remove-btn").on("click", function() {
      $("#box-b").remove();
      $("#log").append("Box B removed — jQuery data cache cleaned up.\n");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .detach() — data preserved (Try It)