javascript - Jquery caching data-* attributes -

in html page , have following div:

<div id="notification"></div>

an ajax call add attribute div after receiving successful response.this ajax success does:

$("form").on("submit", function (e) {         e.preventdefault();         $.ajax({             datatype: 'json',             type: "post",             url: "/dummy/url",             data: {redacted},             success: function (data) {                 $('#notification').attr({'data-status': data['status'], 'data-message': data['message']});                 $('#notification').click();                 $('#notification').removeattr("data-status data-message");             }         });     }); 

the problem attributes of #notification not go away after using removeattr. mean removes attributes page, remains cached. thats why i getting same data-message on every click though server returns different data-message.

for example:

in first ajax call, server returned:

{"status":"success","message":"invitation sent"} in case #notification triggers , shows me data-message="invitation sent". in second call server returned:

{"status":"danger","message":"invitation sending failed"} #notification shows data-message="invitation sent" again.

any suggestion me on this? how can remove cached data? or there alternative of doing there?

instead of using attribute, use data(). if had used data() read attribute going cached property of element.

success: function (data) {     var elementdata = {         status: data['status'],         message: data['message']     }      $('#notification').data(elementdata);     $('#notification').click();     // not sure why needs removed here     // if use `removedata()  }