jquery - jQuery - 通过单击链接隐藏

Question

我目前有一张看起来像这样的桌子......

 <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td><a href="#" class="remove">Remove</a></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td><a href="#" class="remove">Remove</a></td>
    </tr>
    </table>

单击删除链接时，我想隐藏当前的 . 这是我尝试过的以下代码，但没有运气。

$(".remove").click(function() {

  $(this).parent("tr").hide();

}); 

Answer 1

您需要jquery 的最接近（）函数来查看最接近的层次结构。父母看起来只是一个级别。

$(".remove").click(function() {

  $(this).closest("tr").hide();

}); 

Answer 2

该.parent()方法只会查看直接父级。你需要再上一层，.closest()方法是：

$(this).closest("tr").hide();

您也可以（只是为了让您了解正在发生的事情）调用.parent()两次：

$(this).parent().parent().hide();

您传递给的选择器.parent()用于返回匹配的父元素，而不是返回匹配的第一个祖先- 请注意，在上面的示例中我没有传递任何东西，.parent()这很好。

这是一个工作示例。

Answer 3

使用closest()代替parent()：

$(".remove").click(function() {
  $(this).closest("tr").hide();
}); 

更新的小提琴