使用 javascript（或 jquery）隐藏第一个最近的父元素

Question

我想在单击按钮时隐藏 html class。

html结构是这样的：

<thead>
  <tr class="employee-list">
     <th>
         <button class="show-emp">Show Employee</button>
     </th>
  </tr>
</thead>
<tbody class="emp">
   <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
   </tr>
   <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
   </tr>
</tbody>
<tbody class="emp">
   <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
   </tr>
   <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
   </tr>
</tbody>

我也可以有多个.emp class.

我试过类似下面的代码，但仍然无法正常工作（它隐藏了所有带有 .emp class 的元素）

$('.show-emp').click(function() {
   $(this).closest(".emp").hide();
});

它的工作原理是这样的：

当点击 show 按钮时，它只会 hide/show 下方的员工列表。

Answer 1

首先更正您的标记并 jquery 正确。

检查您的 <button 标签
Jquery 代码在这里 ('.show-emp')

您可以通过多种方式实现它。以下方式之一。

$('.show-emp').click(function() {
   $(this).parents().siblings('.emp').first().hide();
   
   // to hide only first sibling then use //first()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
  <tr class="employee-list">
     <th>
         <button class="show-emp"> Btn </button>
     </th>
  </tr>
</thead>
<tbody class="emp">
   <tr class="employee-list">
      <th style="width: 300px" class="text-center">Employee 1</th>
   </tr>
   <tr class="employee-list-last">
      <th style="width: 300px" class="text-center">Employee 2</th>
   </tr>
</tbody>
</table>

Answer 2

.closest() 找到与选择器匹配的最近父元素，但 .emp 不是 .show-emp.

的父元素

您想转到 thead，然后找到它之后与选择器匹配的第一个同级。

.nextAll() 将找到以下所有匹配的兄弟姐妹。使用.first()获得第一个。

$('.show-emp').click(function() {
  $(this).closest("thead").nextAll(".emp").first().toggle();
  $(this).text(function(i, text) {
    return text == 'Show Employee' ? 'Hide Employee' : 'Show Employee';
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr class="employee-list">
      <th>
        <button class="show-emp">Hide Employee</button>
      </th>
    </tr>
  </thead>
  <tbody class="emp">
    <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 1</td>
    </tr>
    <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 2</td>
    </tr>
  </tbody>
  <tbody class="emp">
    <tr class="employee-list">
      <td style="width: 300px" class="text-center">Employee 3</td>
    </tr>
    <tr class="employee-list-last">
      <td style="width: 300px" class="text-center">Employee 4</td>
    </tr>
  </tbody>
</table>

使用 javascript（或 jquery）隐藏第一个最近的父元素

Hide first closest parent element using javascript (or jquery)

html

javascript

jquery