Hide an element in the tables first row

Question

I have the following table

<table id="mytable">
  <tr>
     <td>name</td>
     <td>
       <a id="button1" class="button">link</a>
     </td>
  </tr>
  <tr>
     <td>name2</td>
     <td>
       <a id="button2" class="button">link</a>
     </td>
  </tr>
</table>

I want to hide the first row first column button using jQuery, but I'm not sure how to do that, but I was manage to do the following (to make the first tr font italic).

$(document).ready(function() {
  $("#mytable tr:first").css("font-style", "italic");
});

Answer 1

As you have id of button, you can use id to hide it.

$('#button1').hide();

If you want to use class and can not using id for some reason, you can use find() method to find the element within descendants fulfilling given selector criteria.

Live Demo

$(document).ready(function() {
  $("#mytable tr:first").find('.button').hide();
}); 

Answer 2

use this code

    <script>
        $(document).ready(function() {
      $("#mytable tr:first #button1").css("display", "none");
    });
    </script>