(JQuery) 배열을 수정하십시오

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>