jquery logic bug

Question

I have a JavaScript script in which I add elements to an array (id, value) and I then create check boxes from them. The idea behind it is to allow users to select a sport and it shown as a check box and unchecking it, it disappears from the screen. So when the page loads, some sports are already selected which means the user can not add them again but can remove any of them and add it again. My problem is that the first one added from the database when I remove it, I am unable to add it again; I have put in alert message in the script and the script is telling me it was not removed when indeed it has been removed. What am I doing wrong?

 <script type='text/javascript'>
    //<![CDATA[
     $(window).load(function () {

         var db = [{ id: 6, value: "Running"},{ id: 1, value: "Baseball" }];
         var allVals = [];

         $.each(db, function (k, v) {
             $("#results").append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
             + v.id
             + "\">"
             + v.value
             + "</label>");
             allVals.push(v.id);
         });

         $(function () {
             var sports = [{ id: 1, value: "Baseball" },
                        { id: 2, value: "Soccer" },
                        { id: 3, value: "Basketball" },
                        { id: 4, value: "Volleyball" },
                        { id: 5, value: "Tennis" },
                        { id: 6, value: "Running" },
                        { id: 7, value: "Swimming"}];

             $("#sports").autocomplete({
                 source: sports,
                 select: function (event, ui) {

                     if ($.inArray(ui.item.id, allVals) == -1) {
                         allVals.push(ui.item.id);
                         $("#results")
                                     .append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
                                     + ui.item.id
                                     + "\">"
                                     + ui.item.value
                                     + "</label>");
                         $('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
                         ui.item.value = "";
                     }
                     else {
                         //ALERT TO SEE IF ELEMENT IS STILL IN ARRAY
                         alert("item already in ... but should not be in");
                         ui.item.value = "";
                         $('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
                     }
                 }
             });
         });

         $(document).on("change", ".wList-chk", function () {
             if ($(this).attr('checked')) {
                 return;
             } else {
                 var thisVal = $(this).val();
                 var index = $.inArray(thisVal, allVals);
                 allVals.splice(index, 1);
                 $(this).parent('.wList').remove();
             }
         });
     });//]]>  

</script>

Here is a a complete jsfiddle: http://jsfiddle.net/hdfse/

Answer 1

var thisVal = $(this).val();

should be changed to

var thisVal = parseInt($(this).val());

Because $(this).val() return a string, and in var index = $.inArray(thisVal, allVals);, this index will get -1, thenallVals.splice(index, 1); will delete unexpected item.

Here is the jsfiddle http://jsfiddle.net/hdfse/8/