javascript - 隐藏 tr 元素以防止在其中单击

Question

我有一个表结构(见下面的代码片段)，我的目标是在我点击显示为 delete 的 span 后隐藏一个 tr 元素。我需要包含 delete 的特定 tr。

我已经在最后一个 span 上获得了点击事件的监听器，那个显示“删除”的监听器正在工作。

我有几个 tr 元素，是否可以隐藏包含 span(以及所有内容)的 tr？

    $(".delete_pm").click(function () {
        alert('hey');
        $(this).closest( "tr" ).hide(); // tried this from answers below but no luck, as you can see here
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
        <td>
            <input type="radio" name="credit-card" value="fjxtnw" checked />
            <strong>555555******4444</strong> (MasterCard)
            <label>(default)</label>
            <span id="fjxtnw" class="delete_pm"><label>delete</label></span>
        </td>
    </tr>

Answer 1

您可以使用 .closest寻找 parent 。为它提供 tr 作为选择器，然后简单地隐藏它。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="credit-card" value="fjxtnw" checked />
      <strong>555555******4444</strong> (MasterCard)
      <label>(default)</label>
      <span id="fjxtnw" class="delete_pm"><label>delete</label></span>
    </td>
  </tr>
</table>