jQuery Forum

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 does not occur if I place $(this).remove outside the entire deletion animation code. However, doing that prevents the animation to run completely and one cannot see the animation at all.
Please help me.

HTML

1. <div id="home" data-role="page" data-theme="a">
   
2. <div data-role="header" style="font-weight: normal;text-align:center">I Want ToDo</div>
   
3. <div data-role="content" >
   
4. <form class="tasks-form">
   
5. <input type="text" name="text-input" class="task" autofocus placeholder="Enter Text Here"/>
   
6. </form>
   
7.  <div class="tasks">
   
8. </div> 
9. </div>
   
10. </div>

Javascript

1.    $(document).bind("pageinit",function() { 
            
              var i = 0;
              
              // Initial loading of tasks
              for( i = 0; i < localStorage.length; i++)
                $(".tasks").prepend("<li class='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 class='task-"+i+"'>"+localStorage.getItem("task-"+i)+"</li>");
                  $(".task-" + i).css('display', 'none');
                  $(".task-" + i).slideDown();
                  $(".task").val("");
                  i++;
                }
                return false;
              });
              $(document.body).on("click","li",function() {
                localStorage.removeItem($(this).attr("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) );
                  }
                }
              });
            });