.removeData()

jQuery

previous page next page

.removeData()

Categories: Data | Miscellaneous > Data Storage

.removeData( [name ] ) Returns: jQuery

Description: Remove a previously-stored piece of data.

  • version added: 1.2.3.removeData( [name ] )

    • name
      Type: String
      A string naming the piece of data to delete.

  • version added: 1.7.removeData( [list ] )

    • list
      Type: Array or String
      An array or space-separated string naming the pieces of data to delete.

The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value; when called with no arguments, all values are removed. Removing data from jQuery's internal .data() cache does not effect any HTML5 data- attributes in a document; use .removeAttr() to remove those.

When using .removeData("name"), jQuery will attempt to locate a data- attribute on the element if no property by that name is in the internal data cache. To avoid a re-query of the data- attribute, set the name to a value of either null or undefined (e.g. .data("name", undefined)) rather than using .removeData().

As of jQuery 1.7, when called with an array of keys or a string of space-separated keys, .removeData() deletes the value of each key in that array or string.

As of jQuery 1.4.3, calling .removeData() will cause the value of the property being removed to revert to the value of the data attribute of the same name in the DOM, rather than being set to undefined.

Example:

Set a data store for 2 names then remove one of them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { margin:2px; color:blue; }
                                    

                                  

                                  

                                    

                                        span { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <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>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                          $("span:eq(0)").text("" + $("div").data("test1"));
                                    

                                  

                                  

                                    

                                          $("div").data("test1", "VALUE-1");
                                    

                                  

                                  

                                    

                                          $("div").data("test2", "VALUE-2");
                                    

                                  

                                  

                                    

                                          $("span:eq(1)").text("" + $("div").data("test1"));
                                    

                                  

                                  

                                    

                                          $("div").removeData("test1");
                                    

                                  

                                  

                                    

                                          $("span:eq(2)").text("" + $("div").data("test1"));
                                    

                                  

                                  

                                    

                                          $("span:eq(3)").text("" + $("div").data("test2"));
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page