HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>removeData data-attr demo</title>

  <style>

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

    #box { background: #fde68a; 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: #ea580c; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-right: 6px; margin-bottom: 6px; }

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

  </style>

</head>

<body>

  <div id="box" data-role="dialog">Box with data-role attribute</div>

  <button type="button" id="override">.data("role","modal")</button>

  <button type="button" id="rmcache">.removeData("role")</button>

  <button type="button" id="rmattr">.removeAttr("data-role")</button>

  <pre id="out">role reads: (click a button)</pre>

  <p id="hint">After removeData, .data("role") may re-read from data-role="dialog".</p>

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

  <script>

    function show(msg) {

      $("#out").text(".data('role') → " + $("#box").data("role") + "\nattr data-role → " + $("#box").attr("data-role"));

      $("#hint").text(msg);

    }

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

      $("#box").data("role", "modal");

      show("Cache overridden to modal.");

    });

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

      $("#box").removeData("role");

      show("Cache cleared — .data() may return attribute value dialog.");

    });

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

      $("#box").removeData("role").removeAttr("data-role");

      show("Both cache and attribute removed — role is undefined.");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .removeData() — data-* attribute pitfall (Try It)