javascript - 在 jQuery 中实现重置按钮以取回已删除的 DOM 元素

Question

如何在 jQuery 中实现重置按钮来取回已删除的 DOM 元素？

php 数组 $items = array('a','b','c','d')

标记

<table id="table">
    <?php for( $i=0; $i < count( $items ); $i++ ){?>
    <tr>
        <td><?php echo $i + 1;?></td> // No
        <td><?php echo $items[$i];?></td>
        <td><input type='button' class='DEL' value='DELETE'></td>
    </tr>
    <?php }?>
</table>
<input type="reset" id="RESET" value="Reset">

JS

$('body').on('click','#RESET', function() {
    // Code call back from db then show to display
    // example select * from school 
});

但我不确定这是否正确，因为它会到达

a,b,c,a,b,c,d,...

Answer 1

for($i=0; $i<(count($items)); $i++){
?><tr>
    <td><?php echo ($i+1);?></td> // No
    <td>
        <?php echo $items[$i]; ?> // a,b,c,d
    </td>
    <td>
        <input type='button' class='DEL' value='DELETE'> // delete row
    </td>
</tr><?php
}
<input type="reset" id="RESET" value="Reset">

在文档的页 footer 分，将此代码段放在 <script> 内标签:

window.a = new Array('a','b','c','d');

$('#RESET').click(function(){
  $('#table').empty();
  $.each(a, function(index, element) {
    $('#table').append('<tr><td>'+(index+1)+'<td>'+element+'</td><td><input type="button" class="DEL" value="DELETE"></td></tr>');
  });
});

更新

jsfiddle