Splice刪除多個索引

Question

我正在製作自己的過濾器系統來過濾數據，現在我正在構建基本功能，例如添加和刪除過濾器。

添加過濾器工作正常，但是當我玩弄添加和刪除時，有時splice刪除多個過濾器。爲什麼這樣做？這裏是我的代碼：

var active_filters = []; 

    var available_filters = [ 
     'first_name', 'last_name', 'city' 
    ]; 

    var filters = { 
     first_name: { 
      title: 'First Name', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 

       { 
        input: 'select', 
        options: [ 
         'asc', 'desc' 
        ], 
        values: [ 
         'Ascending', 'Descending' 
        ] 
       } 
      ], 

     }, 

     last_name: { 
      title: 'Last Name', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 

       { 
        input: 'select', 
        options: [ 
         'asc', 'desc' 
        ], 
        values: [ 
         'Ascending', 'Descending' 
        ] 
       } 
      ], 

     }, 

     city: { 
      title: 'City', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 
      ], 

     }, 
    }; 

    var id_filters = $("#filters"); 

    $(document).ready(function() { 
     id_filters.html(template_filters(filters)); 
    }); 

    function template_filters(filters) { 
     var html = '<select class="select_filters" id="select_filters" onchange="add_filter();">'; 

     html += '<option value="0">Select Filter</option>'; 

     for (var property in filters) 
     { 
      if (filters.hasOwnProperty(property)) 
      { 
       var title = filters[property].title; 
       var is_active = filters[property].is_active; 
       var types = filters[property].types; 

       html += '<option value="'+property+'">'+title+'</option>'; 
      } 
     } 

     html += '</select>'; 

     return html; 
    } 

    function template_show_filter(filter, filter_name) 
    { 
     var html = '<div id="filter-'+filter_name+'" class="div_filter">'; 

     html += '<span>'+filter.title+' <a href="javascript:void(0)" onclick="remove_filter(\''+filter_name+'\')">X</a></span>'; 

     html += '</div>'; 
     return html; 
    } 

    function add_filter() 
    { 
     var select_filters = $("#select_filters"); 
     var selected_filter = select_filters.val(); 

     if (selected_filter != 0) 
     { 
      if (active_filters.length == 0) 
      { 
       active_filters.push(selected_filter); 
       id_filters.append(template_show_filter(filters[selected_filter], selected_filter)); 
      } 
      else 
      { 
       if (active_filters.indexOf(selected_filter) === -1) 
       { 
        active_filters.push(selected_filter); 
        id_filters.append(template_show_filter(filters[selected_filter], selected_filter)); 
       } 
      } 


     } 
    } 

    function remove_filter(filter_name) 
    { 
     var index = active_filters.indexOf(filter_name); 



     if (index >= 0) 
     { 
      var id = $("#filter-"+filter_name); 
      id.remove(); 

      active_filters.splice(index); // here, it removes more than one 
     } 
    } 

Answer 1

請看看MDN web docs – Array.prototype.splice()。

如果您只想刪除一個項目，應該調用.splice(index, 1)。

如果不指定第二個參數，「然後所有起始索引通過數組的末尾開始的元素都將被刪除。」

Answer 2

這是因爲你在指數拼接。

active_filters.splice(index); 

這將刪除索引值後面的所有元素。