js how to remove dynamically added row when clicking each remove button

Question

this is html view, when i click on Add Row button it will add a row and it works. but when i click on delete button it wont remove row added. how to make it works?

<input type="button" id="addButton" value=" Add Row " />
<table  id="TextBoxesGroup">
   <tr>
       <td><input id="itemcode1" placeholder="Item Code 1" class="itmcode" /></td>
        <td><input id="itemname1" placeholder="Item Name 1" /></td>
        <td><input id="itemdesc1" placeholder="Item Description 1" /></td>
        <td><input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" /></td>
        <td><input id="itemqty1" placeholder="Item Qty 1" class="itmqty" /></td>
        <td><input id="total1" placeholder="Item Total 1" class="total" /></td>
    </tr> 
</table>

<table>
     <tr>
        <td> Running Total </td>
         <td> <input name="running_total" id="running_total" /></td>
    </tr>
</table>

and this is the js

<script type="text/javascript">
  $(document).ready(function(){ 
    var counter = 2;

    $("#addButton").click(function () {

        if(counter>10){
                alert("Only 10 textboxes allowed");
                return false;
        }   

        var newTextBoxDiv = $(document.createElement('tr'))
             .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total'+ counter + '" id="total'+ counter +'" class="total" /></td>'+ '<td><button id="remove" type="btn"> delete</button</td>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
     });

 $("#remove").click(function () {
                newTextBoxDiv.remove(); 
 });

    $(document).on('keyup', '.itmqty', function(ev){       
         // grab ID to get row number
        thisID = $(this).attr("id");
        rowNum = thisID.slice(-1); 

        //get Amount entered
        amt = $('#itemamnt'+rowNum).val();
        //get QTY
        qty = $('#itemqty'+rowNum).val();        
       $('#total'+rowNum).val(amt*qty);

      currentCount = counter-1;
      var tot = 0;
        $('.total').each(function() {
            tot += parseFloat($(this).val());            
        });

       $('#running_total').val(tot);    
    });

    //$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});

</script>

My Question is: Every thing is working fine but how to remove each row on clicking delete button?? please help