Question

我有一个表格结构（请参阅下面的代码段），我的目标是在点击tr span后隐藏delete元素。我需要包含tr的具体delete。

我已经收到了最后一个跨度上的点击事件的监听器，那个说＆＃34;删除＆＃34;工作

我有几个tr元素，是否可以隐藏包含范围的tr（因此，所有内容）？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用.closest搜索父母。提供tr作为选择器，然后只需隐藏它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你试试这个，

$(".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>

Answer 3

closest会为附近的父母提供匹配的选择器。

hide不会从DOM中移除该项目。如果您也想要这样，您也可以链接remove方法调用。

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

    var _this=$(this);
    _this.closest("tr").hide().remove();

});

Here是一个有效的jsfiddle

在其中单击隐藏tr元素

3 个答案: