How to remove the "date" we set in jQuery?

Asked

Viewed 126 times

1

In jQuery, it is possible to define values for an attribute through the data.

Thus:

$('body').data({id: 1, nome: 'stack'});

And the result of that would be:

console.log($('body').data()); // {id: 1, nome: 'stack'}

But if I want to rewrite the object, I can’t do it with data.

$('body').data({nome: 'stack'});

console.log($('body').data()); // {id:1, nome: 'stack'}

Note that the id continued there, even though I reset the value of the date.

How can I erase a value from data or the whole value of data in jQuery?

jquery

  • you can undo the id: $('body').data.id = null;

  • How can you remove: delete $('body').data.id;

  • As can also remove using the function removeData() jQuery: $('body').data.removeData('id');

2 answers

4


jQuery.removeData() allows you to remove values that were previously entered using jQuery.data().

Let’s take an example:

var div = $( "div" )[ 0 ];
$( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
jQuery.data( div, "test1", "VALUE-1" );
jQuery.data( div, "test2", "VALUE-2" );
$( "span:eq(1)" ).text( "" + jQuery.data( div, "test1" ) );
jQuery.removeData( div, "test1" );
$( "span:eq(2)" ).text( "" + jQuery.data( div, "test1" ) );
$( "span:eq(3)" ).text( "" + jQuery.data( div, "test2" ) );
div {
    margin: 2px;
    color: blue;
  }
  span {
    color: red;
  }
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
 
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
</body>

  • 1

    Also has how to do directly: $('body').removeData('id')

  • Yeah, it can be done that way, good!

3

The $.data, when called with a single argument of the object type, it does not assign a single value - assign several. There is a match between individual attributes set by jQuery and attributes data-* in HTML:

document.body.innerHTML += JSON.stringify($("#teste").data());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste" data-foo="10" data-bar="20" data-baz="30"></div>

The data without parameters is a "shortcut" to access all attributes at once. With an object type parameter, a shortcut to assign multiple. But to access each individual, it is necessary to use the method with a first string argument (the name of the desired attribute):

var el = $("#teste");
document.body.innerHTML += JSON.stringify(el.data()) + "<br>";
el.data("foo", 40);
document.body.innerHTML += JSON.stringify(el.data()) + "<br>";
el.removeData("bar");
document.body.innerHTML += JSON.stringify(el.data()) + "<br>";

document.body.innerHTML += el.data("baz");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste" data-foo="10" data-bar="20" data-baz="30"></div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.