（JQuery）modify array

Question

このコードでは、配列（myList）からテーブルを作成し、特定の行を削除できます。テーブルは新しいリストで再構築されます。これはコンピュータ上では初めてですが（スニペットではなく）うまく動作しますが、再試行すると機能しません。

$(document).ready(function() { 
 
    createTable(myList, myList.length); 
 
}); 
 

 
$('.btn').click(function(){ 
 
    var rowOn = $(this).closest("tr").index(); 
 
\t myList.splice(rowOn, 1); 
 
\t createTable(myList, myList.length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table> 
 

 
<script> 
 
var myList = ["a", "b", "c", "d", "e"]; 
 
createTable = function(list, nb){ 
 
    $('#myTab > tbody > tr').remove(); 
 
    for (var i = 0; i < nb; i++) { 
 
    var str = '<td><button class="btn">Delete</button></td>'; 
 
    $('#myTab > tbody').append('<tr>'+str+'<td>'+list[i]+'</td></tr>'); 
 
    } 
 
}; 
 
</script>

PS：これは、コードの単純化されたサンプルである、私は本当にこれだけの行は動作しませんhidding私の場合には、テーブル全体を再構築する必要があります。

ありがとうございます！

Answer 1

ボタンを再作成し、テーブルを再作成するときにリスナーが失われるため、動的イベント委任を作成する必要があります。このほかに

$('table').on('click', '.btn', function() { /* ... */ }); 

var myList = ["a", "b", "c", "d", "e"]; 
 

 
function createTable(list, nb){ 
 
    $('#myTab > tbody > tr').remove(); 
 

 
    for (var i = 0; i < nb; i++) { 
 
     var str = '<td><button class="btn">Delete</button></td>'; 
 
     $('#myTab > tbody').append('<tr>'+str+'<td>'+list[i]+'</td></tr>'); 
 
    } 
 
}; 
 

 
$(function() { 
 
    createTable(myList, myList.length); 
 
}); 
 

 
$('table').on('click', '.btn', function() { 
 
    var rowOn = $(this).closest("tr").index(); 
 
    myList.splice(rowOn, 1); 
 
    createTable(myList, myList.length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

、なぜあなたは、テーブルを毎回再作成したいですか？あなたはクリックされた行だけを削除することができました。

var myList = ["a", "b", "c", "d", "e"]; 
 

 
$(function() { 
 
    $('#myTab > tbody > tr').remove(); 
 

 
    for (var i = 0; i < myList.length; i++) { 
 
     var str = '<td><button class="btn">Delete</button></td>'; 
 
     $('#myTab > tbody').append('<tr>'+str+'<td>'+myList[i]+'</td></tr>'); 
 
    } 
 
}); 
 

 
$('table').on('click', '.btn', function() { 
 
    var row = $(this).closest("tr"); 
 
    myList.splice(row.index(), 1); 
 
    row.remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id = "myTab"> 
 
    <thead><tr><td>col1</td><td>col2</td></tr></thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>