javascript - Access the element before the current element in jQuery -

i have following html table.

<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">     <tbody>         <tr role="row" class="odd">             <td class="sorting_1">                 <input type="text" class="form-control" value=""> </td>             <td>                 <input type="text" class="form-control" value=""> </td>             <td>                 <input type="text" class="form-control" value=""> </td>             <td class="center">                 <button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>             </td>         </tr>     </tbody> </table> 

when click on button class "btn green", generate new row making use of delegated event handler follows.

$('#sample_editable_1').on('click', ".btn green", function() {     $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>'); }); 

however, when create new row, need "add new" button of previous row vanish. can use hide() function in jquery, how access previous row? following not working.

$( row ).prev() 

can't hide button has been clicked i.e.

    $('#sample_editable_1').on('click', ".btn green", function() {         $(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');         $(this).hide();     });