Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Delete dynamically created data from localstorage

    Link to JSFiddle:
    http://jsfiddle.net/ka05th30ry/xqWLS/15/

    I can create new notes and edit them but when i click the delete button the function associated with the button only deletes the html object within the output div and i cant get it to delete from localstorage.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Use
    Code:
    localStorage.removeItem(key);
    The record books are in danger of being broken. - Commentator BBC 2

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    This did not work i tried the following in my delete function

    $(document).on('mousedown keydown', '.btn-delete', function(){
    $(this).parent().remove();
    var toDel = $(this).closest().attr(".note");
    localStorage.removeItem(toDel);
    });

    Did you try it with my JSFiddle?

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    removeItem won't work when all your notes are under one JSON array.

    update the json and resave it to localstorage.
    here's how to find and remove the item from the click event:
    Code:
    info=info.filter(function(a){return a.label!=this;},this.dataset.label)
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    kaos777s8 (02-17-2014)

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much it works! could you explain it though if you have the time? or point me in the right direction where i can learn more about this?

  • #6
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Did you develop JSFiddle? I see that on your site you have JSLint and JSHint. You have some really cool stuff on that site man! You must have been coding with javascript for a very long time!

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    Quote Originally Posted by kaos777s8 View Post
    Thank you so much it works! could you explain it though if you have the time? or point me in the right direction where i can learn more about this?
    i would recommend brushing up on the iterative Array methods like map/filter/every/some/reduce/etc.


    Code:
    info=info.filter(function(a){return a.label!=this;},this.dataset.label)
    let's walk through a quick overview of the important stuff going on in that code.

    the high-level manner my posted code works in particular is by filtering an array (info) using a term to match the label property (info=info.filter...).

    inside the jQuery event, this means the tag that was clicked on.

    this.dataset.label is the value of the data-label attrib on the clicked tag; the dataset property gives a shortcut to $(this).data("label")

    the function fed to filter() fires on each item in the info array.

    inside the filter() function, this means something different, a value we pass to filter() after the function (this.dataset.label).

    inside the filter() function, we compare the clicked tag's label text to the label property of each item in info (return a.label!=this).

    the first argument passed to a filter() function is an individual array element. it also passes the index as the 2nd argument, and the whole array as the 3rd in case your wondering. But we only need the first argument to compare each slot in the array, and in this function i call that value "a". From the perspective of your info array, "a" means each object in the array at some point; they take turns hopping into the function box. This is much like a coffee filter lets water but not grounds through; under filter(), not everyone makes it out the other side...

    if the filter function returns false (or something that turns false when passed to Boolean) the input element is discarded and won't come out the right-hand side. If the function returns true-ish, the input element is added to the result array.

    so, by grabbing the label from the click event, and passing that to a comparison function, we produce a new array without the one object which has a label property equal to the text of the label that was clicked.

    there are other ways to do this like using a loop and splice(), but i find the filter() approach to be much inline with jQuery's chaining and simpler to customize and re-use.


    glad to be of help, and thanks for talking up my site. It's getting a little rusty since i got a good job, but it does still have some neat odds and ends on it.
    Last edited by rnd me; 02-18-2014 at 12:09 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    kaos777s8 (02-18-2014)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •