0
205
ViewsOculte el primer elemento principal más cercano usando javascript (o jquery)
Quiero ocultar una clase html cuando se hace clic en el botón.
La estructura html es así:
<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>También puedo tener más de una clase .emp.
Probé algo como el código a continuación, pero aún no funciona (oculta todos los elementos con la clase .emp )
$('.show-emp').click(function() { $(this).closest(".emp").hide(); }); La ilustración de cómo funciona es así: 
Cuando se hace clic en el botón show , solo se ocultará o mostrará la lista de empleados que se encuentra debajo.
2 answers
Answer question0
En primer lugar, corrija su marcado y jquery correctamente.
- revisa tu etiqueta
<button - Código Jquery aquí
('.show-emp')
Puedes lograrlo de muchas maneras. una de las siguientes maneras.
$('.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>0
.closest() encuentra el elemento principal más cercano que coincida con el selector, pero .emp no es un elemento principal de .show-emp .
Desea ir hasta la thead , luego encontrar el primer hermano después que coincida con el selector.
.nextAll() encontrará todos los siguientes hermanos que coincidan. Usa .first() para obtener el primero.
$('.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>