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

Answer 2

试试这个：

// Bind all the td element a click event
$('table td.deleteRow').click(function(){
    $(this).parent().remove();
});

顺便说一下，它会从你的html代码中删除javascript。使用此HTML代码

<table>
    <tr>
        <td>BookA</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookB</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookC</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookD</td>
        <td class="red deleteRow">Delete</td>
    </tr>
</table>

Answer 3

这不起作用，因为$（this）没有像你想的那样引用a-tag（我认为它指的是窗口对象或其他东西）

而不是在href-attribute中使用内联javascript来执行此操作

而是这样做

<script type="text/javascript">
 $("table a").click( function() {
  $(this).parent().parent().remove();
 });
</script>

Answer 4

删除内联脚本

<script>
    $(function(){
        $('table td a').live('click', function(){
            $(this).parents('tr').remove();
            return false;
        });
    });
</script>

Answer 5

我相信你的deleteRow函数有一个错误。这是应该如何写的：

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

您传递给deleteRow的引用已经是一个jQuery对象。你不应该使用$（ref），只考虑ref，因为ref已经是一个jQuery对象了。

Answer 6

我必须同意应该避免使用内联javascript，但是如果有其他原因使用它是必要或有益的，那么就是这样。

<table>
   <tr><td>BookA</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookB</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookC</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookD</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
</table>

使用javascript / jquery删除表行

6 个答案: