如何使用 jquery $this 从列表中删除特定的 object？

Question

I have some table with checkboxes in row and after clicking on them I would like to add/remove their data to list as a object. I did already adding object to list but im struggling with removing object which i clicked.

   var myList = [];

    $('.addMe').click(function() {
        var tr = $(this).parent('td').parent('tr');
        var id = $(tr).children('.col-id').text();
        var zxc = $(tr).children('.col-zxc').text();

        if ($(this).hasClass('added')){
            **myList.filter(function(value){
                return value.id !== id;
            });**
            console.log('removing: '+id);
        }
        else{
            myList.push({id,zxc});
            console.log('adding: '+id);
        }

        console.log(myList);
      });

This part is not working:

myList.filter(function(value){
                    return value.id !== id;
                });

So when I added 4 elements:

myList = [ {id:'1', zxc:'test'}, {id:'2', zxc:'test1'}, {id:'3', zxc:'test2'}, {id:'4', zxc:'test3'}]

I would like to remove for example 3rd element clicking on third checkbox and result will be:

myList = [ {id:'1', zxc:'test'}, {id:'2', zxc:'test1'}, {id:'4', zxc:'test3'}]

I tried using filter(), grep() but I cant make it work.

Here is jsfiddle with full code and how its working: https://jsfiddle.net/1rm6pwqk/

Answer 1

The filter method does not mutate the array on which it is invoked. Instead it returns a new array with the elements that satisfy the predicate. Assign the returned value to your myList variable to update it:

myList = myList.filter(function(value){
                return value.id !== id;
            });