You can do that in several ways, question is tagged with jQuery so the easiest way using jQuery is :

$("button").on("click", function(ev) {
    $(this).parents("tr").remove()
});

This will remove tr element when clicked on it's button, you can do what you want inside that anonymous function

Try this

let btns = $("button.remove"); // you will select only buttons with remove class

in your case you want something like this :

btns.each(function(){
let btn  = $(this);
   btn.on('click',()=>{
    // your stuff
   })
})

i hope it was useful !

The example below does what you need, it will check any click within a table element to see if it matches the required pattern (in this case a button with class .remove), before then actioning the code.

I've added a dynamically added row so you can test it.

If you aren't having dynamically added rows (i.e. they are all there before this code is run) then you can simply use:

$("table button.remove").click( function() {

    $(this).closest("tr").remove();

});

// Add click event linked to the table
// Will trigger whenever a button with class .remove is clicked within the table
$( "table" ).on( "click", "button.remove", function() {

  // Move up DOM tree to nearest 'tr' and remove it
  $(this).closest("tr").remove();

});


// Add click event to add row button
$("#add-row").click( function() {

  // Add dynamic row for testing
  $("table").append('<tr><td>Info</td><td><button class="remove">Remove row</button></td></tr>');

});

td {
  border: 1px solid black;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Info</td>
    <td><button class="remove">Remove row</button></td>
  </tr>
</table>

<button id="add-row">Add Row</button>