Remove form field javascript

I have a form where I have an table with an employee and every time I click on plus a new row for employee is added but when I click the remove field the script add a new row till the maximum. So what I want is the “-” icon to remove the field added.

This is my code:

<table id="employee_tbl" >
        <tr>
            <th>
                <b><span data-i18n-key="employee">Employee</span></b>
            </th>
        </tr>
        <tr>
            <td>
                <label for="employee"><i class="fas fa-plus-circle"></i></label>
                <input type="text" name="employee"  class="add_button" id="employee" required >
            </td>
        </tr>

and this is the script:

$(document).ready(function(){
          var maxField = 3; //Input fields increment limitation
          var addButton = $('.add_button'); //Add button selector
          var emp = $('#employee_tbl'); //Input field wrapper
          var fieldHTML = '<tr><td><label for="employee"><i class="fas fa-minus-circle"></i></label><input type="text" name="employee" class="remove_button" id="employee" required></td></tr>'; //New input field html 
          var x = 1; //Initial field counter is 1
          
          //Once add button is clicked
          $(addButton).click(function(){
              //Check maximum number of input fields
              if(x < maxField){ 
                  x++; //Increment field counter
                  $(emp).append(fieldHTML); //Add field html
              }
          });
          

           //Once remove button is clicked
           $(emp).on('click', '.remove_button', function(e){
              e.preventDefault();
              $(this).parent('div').remove(); //Remove field html
              x--; //Decrement field counter
          });
          });