Splice JSON配列JavaScript

Question

JavaScript配列のスプライス機能を再利用するための関数を作成しましたが、一度実行した後は再利用できません。

var removePerson = function(d, person_id) { 
    var person_index = d.findIndex(i => i.id == person_id); 
    d.splice(person_index, 1); 
    return d; 
}; 

コンソールエラーは発生しません。私はそれをデバッグする方法を知らない。ここに私のJSFiddleです。

例を実行すると、リストから1人を削除できますが、残りの2個を削除しようとすると何も起こりません（コンソールエラー、コンソール応答など）。どのように私のremovePerson()機能の再利用をサポートすることができますか？

Answer 1

あなたのソリューションが原因でどのようにあなたのpopulateList作品の動作しません。この行は、テーブルを空にしてclickイベントリスナーで接続ボタンを削除し

$('#load').empty(); 

：あなたのpopulateListで

は、次の行を持っています。

次に、イベントリスナーに添付されていない新しいbutton.deleteを完全に追加します。

これを解決するには、.on()をpopulateList機能に入れることができます。

var populateList = function(d) { 
    $("#load").empty(); 
    var new_rows; 
    for(var i = 0; i < d.length; i++) { 
     new_rows += "<tr>" + 
      "<td>" + d[i].id + "</td>" + 
      "<td>" + d[i].name + "</td>" + 
      "<td>" + d[i].phone + "</td>" + 
      "<td><button class='delete' data-id='" + d[i].id + "'>delete</button></td>" + 
      "</tr>"; 
    } 
    $("#load").append(new_rows); 

    // delete event 
    $(".delete").on("click", function() { 
     var delete_sel = $(this).attr("data-id"); 
     populateList(removePerson(d, delete_sel)); 
    }); 
}; 

ここには、作業中のjsFiddleがあります。

また、this answerのソリューションを使用することもできます（これはよりクリーンなソリューションです）。

$("table").on("click",".delete", function() { 
    var delete_sel = $(this).attr("data-id"); 
    populateList(removePerson(data, delete_sel)); 
}); 

もっと彼の答えはjQuery documentation上で動作する理由の説明（selectorパラメータを見てください）。

Answer 2

は、このコードを試してみてください：JSFiddle

$("table").on("click",".delete", function() { 
    var delete_sel = $(this).attr("data-id"); 
    populateList(removePerson(data, delete_sel)); 
});