Removing Checked Items From Array

Question

I have a function that takes all the items in a list that are not checked and creates a new array out of them.

// Allows user to remove keywords from the locaStorage
$('#clearChecked').click(function() {
  currentArray = [];
  $('.check').each(function() {
    var $curr = $(this);
    if (!$curr.is(':checked')) {
      var value = $curr.parent().text();
      currentArray.push(value);
      localStorage.setItem('keyWords', JSON.stringify(currentArray));
      loadKeyWords();
    } else {
      $curr.parent().remove();
    }
  });
});

The problem is that if I check all the items it wont remove any. Or if one item is left it wont let me remove the last item.

But it will allow me to remove as many items as I want as long as there is one item left.

How can I change my function to allow me remove the last item in the array or all of the items if they are checked.

I am outputting the array like this,

// Generate random id for id of keywords
function guidGenerator() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

 var x = guidGenerator();
      $('#keyWords').prepend('<li class="list-group-item" data-style="button"><input id="'+ x +'" class="check" name="check" type="checkbox"><label for="'+ x +'">'+localArray[i]+'</label></li>'); 

In the html file

<button id="clearChecked">Clear Checked Items</button>

<ul id="keyWords">
    <li class="list-group-item" data-style="button">
        <input id="4667ac55-5de4-df61-9b82-9b50c728adea" class="check" name="check" type="checkbox">
        <label for="4667ac55-5de4-df61-9b82-9b50c728adea">qedfeqdeqdeq</label>
    </li>
</ul> 

Answer 1

Just add the code in check box clicked event:

if($('.check:checked').length == $('.check').length) {
    window.localStorage.clear();
    location.reload();
    return false;
}

Answer 2

I solved the issue (at least on my side) by:

1. Changing the ID of the input and the for of the label to a unique string without any spaces

2. Added }); to below the jQuery you posted, as it was not closing the main original function.

    <button id="clearChecked">Clear Checked Items</button> <ul id="keyWords"> <li class="list-group-item" data-style="button"> <input id="link_0" class="check" name="check" type="checkbox"> <label for="link_0">I am a link</label> </li> <li class="list-group-item" data-style="button"> <input id="link_1" class="check" name="check" type="checkbox"> <label for="link_1">I am a link</label> </li> <li class="list-group-item" data-style="button"> <input id="link_2" class="check" name="check" type="checkbox"> <label for="link_2">I am a link</label> </li> </ul> $('#clearChecked').click(function() { currentArray = []; $('.check').each(function() { var $curr = $(this); if (!$curr.is(':checked')) { var value = $curr.parent().text(); currentArray.push(value); localStorage.setItem('keyWords', JSON.stringify(currentArray)); loadKeyWords(); } else { $curr.parent().remove(); } }); // only closing the $('.check').each(function() { function }); // closing the $('#clearChecked').click(function() { function 

Check out this fiddle to see it working

EDIT:

Regarding the GUID that you posted... fix it.

function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for( var i=0; i < 5; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;
}

Credit for makeid function goes to csharptest.det