jQuery onclick删除表格行

Question

如何在点击时删除表格行？

这是一个jsfiddle.

我想只删除嵌套del链接的行,而不是脚本现在执行的最后一行.

Onclick调用delTableRow()函数,需要更改该函数以删除嵌套的del链接行.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
    jQtable.each(function(){
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}
function delTableRow(jQtable){
    jQtable.each(function(){
        $('tr:last', this).remove();
    });
}
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
</table>

Answer 1

删除onclick并替换为类(即class ="remove").将事件绑定到表 - 这将使您获得比拥有大量事件处理程序更高的性能,并确保添加的新行也将遵循此行为.

$('table').on('click','tr a.remove',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});