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()をご覧ください。

アイテムを1つだけ削除する場合は、.splice(index, 1)に電話する必要があります。

あなたが二番目の引数を指定しない場合は、「配列の終わりまでに開始インデックスから始まる要素のすべてが削除されます。」

Answer 2

あなたがインデックスにスプライシングされているためです。

active_filters.splice(index); 

これにより、インデックス値の後のすべての要素が削除されます。