HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.data() get set remove</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 480px; }
    div { margin: 5px; padding: 12px; background: #fef08a; border-radius: 6px; }
    button { margin: 5px; padding: 8px 12px; font-size: 14px; }
    p { margin: 8px 5px; color: #2563eb; }
    span { color: #dc2626; font-weight: 600; }
  </style>
</head>
<body>
  <div>A div</div>
  <button type="button">Get "blah" from the div</button>
  <button type="button">Set "blah" to "hello"</button>
  <button type="button">Set "blah" to 86</button>
  <button type="button">Remove "blah" from the div</button>
  <p>The "blah" value of this div is? <span>?</span></p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $( "button" ).on( "click", function () {
      var value;
      switch ( $( "button" ).index( this ) ) {
        case 0:
          value = $( "div" ).data( "blah" );
          break;
        case 1:
          $( "div" ).data( "blah", "hello" );
          value = "Stored!";
          break;
        case 2:
          $( "div" ).data( "blah", 86 );
          value = "Stored!";
          break;
        case 3:
          $( "div" ).removeData( "blah" );
          value = "Removed!";
          break;
      }
      $( "span" ).text( "" + value );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .data() — get / set / remove (Try It)