Values not getting deleted in localStorage

[hari1]

I am learning how to make a todo app using localStorage. I am making this app using Blackberry 10 jQuery Mobile theme. The problem is that sometimes the items in localStorage do not get deleted.

See the JSFiddle here
Get the Backberry jQuery theme files here:
Javascript
CSS

Steps to reproduce the problem:

1. Insert items into the list.
2. Delete multiple items quickly by swiping.
3. Reload the page and see that 2-3 items still show up on screen and do not get deleted.

This problem still occurs if I place $(this).remove outside the entire deletion animation code.
Please help me.

I have recorded a video to show how the problem appears on my computer. I am using latest version of Firefox on Windows XP. I have tried the same on Firefox and Chrome on Bodhi Linux too.

Download this video here


HTML

<div id="home" data-role="page" data-theme="a">
    <div data-role="content">
        <form class="tasks-form">
            <input type="text" name="text-input" class="task" autofocus placeholder="Enter Text Here" />
        </form>
        <div class="tasks"></div>
    </div>
</div>

Javascript

 var i = 0;

       // Initial loading of tasks
       for (i = 0; i < localStorage.length; i++)
       $(".tasks").prepend("<li data-id='task-" + i + "'>" + localStorage.getItem('task-' + i) + "</li>");

       // Add a task
       $(".tasks-form").submit(function () {
           if ($(".task").val() !== "") {
               localStorage.setItem("task-" + i, $(".task").val());
               $(".tasks").prepend("<li data-id='task-" + i + "'>" + localStorage.getItem("task-" + i) + "</li>");
               $("li[data-id='task-" + i + "']").css('display', 'none');
               $("li[data-id='task-" + i + "']").slideDown();
               $(".task").val("");
               i++;
           }
           return false;
       });

// Delete a task
       $(document.body).on("click", "li", function () {
           localStorage.removeItem($(this).data("id"));

           var $that = $(this);
           $(this).animate({
               'margin-left': '600px',
               'opacity': '0'
           }, 'swing',

           function () {
               $(this).slideUp('fast', function () {
                   $that.remove();
               });
           });

           for (i = 0; i < localStorage.length; i++) {
               if (!localStorage.getItem("task-" + i)) {
                   localStorage.setItem("task-" + i, localStorage.getItem('task-' + (i + 1)));
                   localStorage.removeItem('task-' + (i + 1));
               }
           }
       });