Splice entfernt mehr als einen Index

Question

Ich erstelle ein eigenes Filtersystem für die Filterung von Daten und baue jetzt die grundlegenden Funktionen wie das Hinzufügen und Entfernen von Filtern.

Hinzufügen von Filtern funktioniert gut, aber wenn ich mit dem Hinzufügen und Entfernen herumspielen, entfernt manchmal splice mehr als einen Filter. Warum macht es das? Hier ist mein Code:

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

Bitte sehen Sie sich MDN web docs – Array.prototype.splice(). Wenn Sie nur ein Element entfernen möchten, rufen Sie .splice(index, 1) an.

Wenn Sie nicht das zweite Argument nicht angeben, „dann alle Elemente mit Startindex wird auf bis zum Ende des Arrays beginnend gelöscht.“

Answer 2

Dies liegt daran, dass Sie bei Index sind Spleißen.

active_filters.splice(index); 

Dadurch werden alle Elemente nach dem Indexwert entfernt.