如何隐藏家长'的带有JavaScript的父元素

How to hide parent's parent element with JavaScript?

本文关键字：元素 JavaScript 藏家 何隐      更新时间：2023-09-26

我有这个代码，我希望当点击按钮"Accept"时，整个<tr>标记都被样式"display:none；"隐藏。现在，按钮隐藏了<td>，我不希望它变成那样。我想把整排桌子都藏起来。

<table class="table table-bordered">
  <tr>
    <th>Name</th>
    <th>Username</th>
    <th>Email</th>
    <th>Skype</th>
    <th>Phone</th>
    <th>Message</th>
    <th>Accept?</th>
  </tr>
  <tr style="">
    <td>Name</td>
    <td>Username</td>
    <td>email@gmail.com</td>
    <td>skypename</td>
    <td>phone</td>
    <td>MESSAGE</td>
    <td><button onclick="this.parentElement.style.display='none';" class="btn btn-success">Accept</button> <button class="btn btn-danger">Deny</button></td>
  </tr>
</table>

只需执行以下操作：

<button onclick="this.parentElement.parentElement.style.display='none';" class="btn btn-success">Accept</button>

既然你提到了jQuery，你可以这样做

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
      <tr>
        <th>Name</th>
        <th>Username</th>
        <th>Email</th>
        <th>Skype</th>
        <th>Phone</th>
        <th>Message</th>
        <th>Accept?</th>
      </tr>
      <tr style="">
        <td>Name</td>
        <td>Username</td>
        <td>email@gmail.com</td>
        <td>skypename</td>
        <td>phone</td>
        <td>MESSAGE</td>
        <td><button onclick="$(this).parents('tr').hide()" class="btn btn-success">Accept</button> <button class="btn btn-danger">Deny</button></td>
      </tr>
    </table>

相关文章：