HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>removeData clear all demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 480px; }

    #panel { background: #fef08a; padding: 12px; border-radius: 6px; margin: 10px 0; }

    pre { background: #f1f5f9; padding: 10px; border-radius: 6px; font-size: 13px; }

    button { margin-top: 8px; padding: 10px 16px; background: #059669; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-right: 8px; }

    #hint { color: #64748b; font-size: 14px; margin-top: 10px; }

  </style>

</head>

<body>

  <div id="panel">Panel with cached state</div>

  <button type="button" id="set">Set data</button>

  <button type="button" id="clear">removeData()</button>

  <pre id="out">Click "Set data" first.</pre>

  <p id="hint">No-argument removeData clears the entire cache.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    function show() {

      var $p = $("#panel");

      $("#out").text(

        "open=" + $p.data("open") + "\n" +

        "index=" + $p.data("index") + "\n" +

        "label=" + $p.data("label")

      );

    }

    $("#set").on("click", function() {

      $("#panel").data("open", true).data("index", 3).data("label", "Settings");

      show();

      $("#hint").text("Three keys stored in jQuery cache.");

    });

    $("#clear").on("click", function() {

      $("#panel").removeData();

      show();

      $("#hint").text("All keys cleared — each reads undefined.");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .removeData() — clear all cache (Try It)