Question

0

206

Views

Hide first closest parent element using javascript (or jquery)

I want to hide a html class when button clicked.

The html structure is like this:

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

Also I can have more than one .emp class.

I've tried something like code bellow, but still not working (it hide all element with .emp class)

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

The ilustration how it works is like this:

When show button clicked, it will only hide/show the employee list bellow it.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

First of all correct your markup and jquery properly.

check your <button tag
Jquery code here ('.show-emp')

You can achieve it many way. one of the below way.

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

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-28T08:14:38.827Z

.closest() finds the closest parent element that matches the selector, but .emp isn't a parent of .show-emp.

You want to go up to the thead, then find the first sibling after it that matches the selector.

.nextAll() will find all the following siblings that match. Use .first() to get the first one.

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

0

206

Hide first closest parent element using javascript (or jquery)

2 answers

0

0

Find remote jobs

Andres GPT