使用javascript/jquery删除表行

Question

这不起作用.Firebug并没有抛出任何错误.

HTML:

<table>
       <tr><td>BookA</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
       <tr><td>BookB</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookC</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookD</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
</table>

使用Javascript:

function deleteRow(ref) {   
    $(ref).parent().parent().remove(); 
 }

如果可能的话,我想使用内联javascript的解决方案

Answer 1

首先,内联JavaScript(href="javascript:x"或onclick="x")通常很糟糕.使用内联JavaScript,您将无法访问事件对象,并且您无法确定对哪些this引用.

jQuery(以及几乎所有其他JavaScript库/框架)都具有内置事件处理功能.因此,使用事件处理程序,您的代码看起来像这样:

$('a.red').click(function(e) {
  e.preventDefault(); // don't follow the link
  $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});

这是一个演示:http://jsbin.com/okaxu