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

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

1 个答案: