.removeData doesn't remove data when data-* attributes are used

[cowboy]

Test case here: ​http://jsfiddle.net/cowboy/s8XgA/ (also inline, at the bottom of this ticket)

One approach would be to set a flag in jQuery's data system once a data- attribute has been accessed to tell .data to never again try to fetch it from the attribute. The other approach of removing the data- attribute from the element after being accessed could be problematic, in case the element were to be cloned afterwards.

var div = $('div');
div.data( 'baz', 789 );

console.log( div.data( 'foo' ) );   // 123
console.log( div.data( 'bar' ).a ); // "456"
console.log( div.data( 'baz' ) );   // 789

div.removeData( 'foo' );
div.removeData( 'bar' );
div.removeData( 'baz' );

console.log( div.data( 'foo' ) );   // 123
console.log( div.data( 'bar' ).a ); // "456"
console.log( div.data( 'baz' ) );   // undefined​

[cowboy]

(FWIW, I raised this issue well before the code was integrated into core)

[addyosmani]

I can confirm this issue is as-described by cowboy. Opening for additional comments and a patch.

[addyosmani]

As this issue has been already flagged in #7209, I'm moving the discussion on this particular bug to there as we've already isolated one of the areas of the core causing these issues.

[addyosmani]

Duplicate of #7209.

[cowboy]

Both tickets seem to be related, in that they deal with .removeData, but I think they're separate issues.

[addyosmani]

On second glances you're correct. The issues are related but are in fact different in nature. Re-opening.

[john]

This behavior is correct given the nature of .data() and data- attributes. Data properties that you set are just a light layer sitting on top of the data- attributes themselves. The value of the data- attribute is only pulled in to the data structure once (the first time it's accessed) and then left as-is (unless the user explicitly uses .attr() to manipulate it). Thus the original value with always be there even if you change .data() or call .removeData(). This is all as designed: .data() and data- are similar to .style and stylesheets (you can change .style all you want but the underlying stylesheets will always remain intact). This also has the side effect of being fast.

[cowboy]

Not sure who will see this comment, but in the future, any time an issue is closed as "wontfix" the docs should probably be checked to see if they could be made more clear. In this example, the ​API docs for .removeData fail to mention this behavior anywhere.