Remove html table row using javascript or jquery? -

i have dynamic table in html form has functionality add/drop rows. name of each element has number appended end of specifying row number (e.g. id.0 , id.1 , etc.). have written function attempt remove each row update name of each element:

function remove() {      var thename=getitemnames();     var counter=thename.length;     var index=0;      f.preventdefault();     $(this).parents("tr").remove();     counter--;      $('input[name*="id."]').each(function()   {          $(this).attr("name", "id."+index);         index++;     });     $('input[name*="date."]').each(function()   {          $(this).attr("name", "date."+index);         index++;     });     $('input[name*="value."]').each(function()   {          $(this).attr("name", "value."+index);         index++;     });     $('input[name*="required."]').each(function()   {          $(this).attr("name", "required."+index);         index++;     });  } 

this, however, removes remove button , not entire row expected to. can see i'm doing wrong?

assuming table looks this

<table>     <tbody>         <tr>             <td></td>             <td>col2</td>             <td><input type="button" name="x" value="x" /></td>         </tr>         <tr>             <td>col1</td>             <td>col2</td>             <td><input type="button" name="x" value="x" /></td>         </tr>     </tbody> </table> 

just use

$("input.btn" ).click(function(event) {     $(this).parent().parent().remove(); }); 

or

 $( "input.btn" ).click(function(event) {         $(this).closest("tr").remove();     }); 

as doing going parent tr , looking tr

if table being rendered javascript may have change click on

$("input.btn" ).on(click, function(){      $(this).closest("tr").remove(); });