JQuery $ (this) .closest show & hide

Question

I have a table with several rows. On each line there is a button "Show details" and a button "Hide information". When I click on the "Show Details" button, I want the "Hide Details" button to be displayed only for a specific line. I thought the .closest () function would work, but that's not all.

Here is the HTML

<table> <tr id="1"> <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td> </tr> <tr id="2"> <td><button class='view'>View Details</button><button class='hide' style='display:none;'>Hide Details</button></td> </tr> </table> 

Here is jQuery

 $(".view").click(function() { $("#patient").show(""); $(this).hide(); $(this).closest(".hide").show(); }); 

Answer 1

Do you get attached after the house is ready? Try the following:

 $(function(){ $(".view").click(function() { $("#patient").show(""); $(this).hide().next().show(); }); }); 

Answer 2

.closest looks only at the current item and its parents. You must do this, for example:

 $(this).parent().find('.hide'); 

or

 $(this).siblings('.hide'); 

Answer 3

try the following () instead of the nearest ().

http://api.jquery.com/next/ http://api.jquery.com/siblings/

When using the closest, you usually give it additional information, for example, the class to look for, or something else.