Is there a technique to remove an item of value 'this' from an array?

Question

I am creating a To-Do list with the ability to remove specific items from the list. I am currently trying to use 'localStorage' to essentially save the list on page refresh. However, when I delete an item from the list, the 'localStorage' does not work as intended and instead removes the first item in the array when you next load the page.

JS & jQuery:

$(document).ready(function () {
    $(document).on('click', '.delete-task', function () { // We use 'on' as the element is dynamically added
        console.log("'Delete' button pressed");

        var foo = $(this).closest('li');
        console.log(foo);


        $(this).closest('li').fadeOut(250, function() {

            arr.splice(foo, 1);

            $(this).remove(); // Dynamically remove the DOM element from the list
            localStorage.setItem('items', JSON.stringify(arr));

            console.log(arr);
            console.log(localStorage.getItem('items'));

        });
    });
});  

If interested, the HTML format of an item within the 'ul' list looks similar to this:

<li><span class="text-task">5</span><span class="delete-task">x</span></li>

I am expecting the selected item from the list to be removed and store within the localStorage correctly when you next load the page.

Update: As @Slim pointed out, 'foo' is a JS object and not an index.

My question is, how do I find the index of the specified item (the 'li') within the 'arr' array?

Answer 1

You could try to find the parent of foo using .parent() ( https://api.jquery.com/parent/ ) and then find the index of given li by using .index() ( https://api.jquery.com/index/ )

...
var index = foo.parent().index( foo );
arr.splice(index, 1);
...

Also, you should try to cache jQuery object. Calling multiple times $(this) is calculating the same thing multiple times. For example:

...
var $self = $(this)
var foo = $self.closest('li');
console.log(foo);
$self.closest('li').fadeOut(250, function() {
...

Also, good idea is to name variables containing jQuery objects starting with $ - it's quite a common pattern.

Answer 2

simulate this

<ul id="list">
  <li data-id="1" >Coffee <span class="delete-task">x</span></li>
  <li data-id="2" >Tea    <span class="delete-task">x</span></li>
  <li data-id="3" >Milk   <span class="delete-task">x</span></li>
</ul>

use id value here

$(document).on('click', '.delete-task', function () { 

     var id = $(this).parents('li').attr('data-id');

      for (var k in arr) {
        if (typeof arr[k] !== 'function') {
        if (arr[k].id == id) {
              //your codes
               break;
             }
           }
         }   

  });

I also recommend you use : https://github.com/localForage/localForage