Question

我有一张看起来像这样的表：

<table bordered='1'>
    <tr>
        <td>Apple</td><td><a href="#" onclick="delete(this);">x</a></td>
    </tr>
    <tr>
        <td>Ball</td><td><a href="#" onclick="delete(this);">x</a></td>
    </tr>
</table>
<script>
function delete(clickedOne) {
    alert(clickedOne);
   clickedOne.parent().parent().remove();     
}
</script>

现在我要做的是删除＆＃34; tr＆＃34;其中＆＃39; x＆＃39;已被点击。为此，我需要让我的删除功能知道哪些＆＃39; x＆＃39;已被点击。但是这个＆＃39;作为参数似乎不起作用。

注意：我无法在表格元素中添加 id 。

Answer 1

首先：

delete是保留关键字。如果您查看JavaScript控制台，您会看到如下错误：

未捕获的SyntaxError：意外的令牌删除

将您的功能称为其他内容。

第二

clickedOne是一个DOM节点，但parent()是一个jQuery方法。

您希望clickedOne.parentNode.parentNode到达tr元素（然后您想在表格行的父元素上调用removeChild）。

Answer 2

我建议你使用jquery，因为dom处理更容易，它也是从jtml中分离javascript的正确方法

如果你想使用jquery，比使用parent（）更好的方法.parent（）ist来获取所有父节点并过滤它们。

$(function() {
  $(".myTable a").click(function(){
    $(this).parents('tr').remove();
  });
});

并像这样更改你的HTML：

<table bordered='1' class="myTable">
  <tr>
    <td>Apple</td><td><a href="#">x</a></td>
  </tr>
  <tr>
    <td>Ball</td><td><a href="#">x</a></td>
  </tr>
</table>

你可以在小提琴上测试它： http://jsfiddle.net/SP2X9/

Answer 3

您可以只给class和onclick函数在此处输入代码

    <a href="#" class="delete_row">x</a>
    $(function() {
      $(".delete_row").click(function(){
        $(this).closest('tr').remove();
      });
    });

通过＆＃39;这个＆＃39; on onClick事件函数调用

3 个答案: