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

您需要使用closest() jquery函数来查看最接近层次结构的内容。家长只会看一个级别。

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

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

});

Answer 2

.parent()方法只会查看直接父级。您需要使用.closest()方法进一步提升一级：

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

您也可以（只是为了让您知道发生了什么）调用.parent()两次：

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

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

这是working example。

Answer 3

使用closest()代替parent()：

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

<强> Updated fiddle

jQuery - 通过单击链接隐藏

3 个答案: