如何根据您使用javascript单击的项目从数组中删除特定项目

Question

我希望能够单击列表项（由数组的项组成）并将其从数组中永久删除。我可以在使用 remove() 单击时将其删除，但是当我将另一个项目添加到数组时，该项目会显示回来，以及我刚刚添加的新项目。

JSFIDDLE 账号：http://jsfiddle.net/trav5567/3s64o1ta/1/

Javascript

      function testArray(){
       var Fruit = ['apple', 'bannanna', 'rasberry', 'watermelon', 'grape', 'orange'];
       function initArray(){
        loopArray();
       }initArray();
       function myFruit(){
         $('#addFruit').on('click', function(e) {
          e.preventDefault();
          var flag = true;
          var val = $('#fruitAdd').val();
          for(var i = 0 ; i < Fruit.length ; i ++){
            if(Fruit[i] == val){
              flag = false;
              console.log('already entered this item');
             }        
           }
           if(flag){
            Fruit.push(val);
            loopArray();
           }
         });
         }myFruit();
         function loopArray(){
           var fruitList = $('ul.fruit');
           var arrayContainer = $('.arrayContainer');
           fruitList.empty();
           for(var i = 0; i< Fruit.length; i++){
             fruitList.append('<li>'+Fruit[i]+'</li>');
           }
          }
         function removeItem(){
            var itemClicked = $('ul.fruit li');
            itemClicked.on('click', function(){
               $(this).remove();
            });
         }removeItem();
       }testArray();

Answer 1

单击时您不会从数组中删除项目，您只是在单击时删除包含元素的 li 标签，为了在单击项目的 li 时也从数组中删除元素，您必须使用 splice 方法从数组中删除元素作为

    var itemClicked = $('ul.fruit li');
       itemClicked.on('click', function () {
       $(this).remove();
       var item = $(this).text();
       var index = Fruit.indexOf(item);
      Fruit.splice(index,1);
   });

Check the Working Fiddle Here