在 onClick 事件函数调用上传递“this”答案

【问题标题】：passing 'this' on onClick event function call在 onClick 事件函数调用上传递“this”
【发布时间】：2014-08-01 14:25:39
【问题描述】：

我有一个如下所示的表格：

<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>

现在我要做的是删除单击“x”的“tr”。为此，我需要让我的删除功能知道单击了哪个“x”。但是“this”作为参数似乎不起作用。

注意：我不能将 id 放在我的表格元素中。

【问题讨论】：

您正在使用 jquery。你为什么不一直使用它？
避免使用内联 JavaScript。另外，不要将你的函数命名为delete。
除了上述有效的 cmets 之外，clickedOne 是一个 DOM 元素，而不是一个 jQuery 对象。此外，delete 不是一个很好的函数名称，因为它是一个保留关键字。
在 POJS 中，父母作为属性被访问（比 jQuery 的 parent 方法快得多）：var tr = clickedOne.parentNode.parentNode; tr.parentNode.removeChild(tr).

标签： javascript jquery

【解决方案1】：

第一：

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

Uncaught SyntaxError: Unexpected token delete

调用你的函数其他东西。

第二：

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

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

【讨论】：

【解决方案2】：

我建议你使用jquery，因为dom处理更容易，而且它也是将javascript与html分开的正确方法

如果你想使用 jquery，比使用 parent().parent() 更好的方法是获取所有父母并过滤它们。

$(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/

【讨论】：

【解决方案3】：

你可以只提供类和 onclick 功能在此输入代码

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

【讨论】：