Remove item that was added after a XMLHttpRequest

I'm using JavaScript with xmlhttp to add another line item to my form. I'm trying to figure out how to remove a line item if a user presses the "Add Line Item" button to many times so that the form doesn't try and post empty values from the unnecessary line item.

I'm lost on how to do this, I think it has something to do with remove() but I'm not sure how to incorporate it.

Here is my JavaScript code

<script type="text/javascript">
     var counter = 1;
     function addInput(div){
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          var newdiv = document.createElement(div);
          var splitResponse = xmlhttp.responseText.split( "[BRK]" );
          var firstDropdownContent = splitResponse[0];
          var secondDropdownContent = splitResponse[1];
          newdiv.innerHTML = "<table><tr><td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Item " + (++counter) + "</td><td>Quantity</td><td>Description</td><td>Amount</td><td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Tax Rate</td></tr><tr><td width='190'><select name='item[]'><option value='' selected></option>" + (firstDropdownContent) + "</select></td><td width='90'><input name='quantity[]' type='text' size='5' /></td><td width='440'><input name='description[]' type='text' size='60' /></td><td width='120'><input name='amount[]' type='text' size='6' /></td><td><select name='taxid[]'><option value='' selected></option>" + (secondDropdownContent) + "</select></td></tr></table><br />";
        }
        document.getElementById(div).appendChild(newdiv);
     }

     xmlhttp.open("GET", "invoicedropdownquery.php", false);
     xmlhttp.send();

   }
</script>

Here is my button

<input type="button" value="Add Line Item" onClick="addInput('dynamicInput');">

And then I simply use a div to place it.

<div id="dynamicInput"></div>

Thanks in advance if you can help. I probably would just place a gif next to each line item to delete it.

Edit: Here is the html from inside the javascript, a little easier to read.

<table><tr>
<td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Item " + (++counter) + "</td>
<td>Quantity</td>
<td>Description</td>
<td>Amount</td>
<td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Tax Rate</td></tr>
<tr><td width='190'><select name='item[]'><option value='' selected></option>" + (firstDropdownContent) + "</select></td>
<td width='90'><input name='quantity[]' type='text' size='5' /></td>
<td width='440'><input name='description[]' type='text' size='60' /></td>
<td width='120'><input name='amount[]' type='text' size='6' /></td>
<td><select name='taxid[]'><option value='' selected></option>" + (secondDropdownContent) + "</select></td></tr></table><br />

If I understood your question right, you want to add one remove button for each row.

Basically for that it is necessary to set one dynamic id for the table added and one button which will invoke the function to remove the row passing by parameter the id of the table.

Function to remove an item of the dynamic div:

function removeItem(itemId){
    document.getElementById('dynamicInput').removeChild(document.getElementById(itemId));
}

This is your updated code without the ajax request to create rows and remove it:

    <script>
      var counter = 0;
      function add(div){
          var newdiv = document.createElement('div');
          var firstDropdownContent = "first";
          var secondDropdownContent = "second";
          newdiv.id = "row"+(++counter);
          newdiv.innerHTML = "<table ><tr><td><img style='background:#ffffff; float:left;' src='../../images/spacer_icon.png'>Item " + (counter) + "</td><td>Quantity</td><td>Description</td><td>Amount</td><td><img style='background:#ffffff; float:left; ' src='../../images/spacer_icon.png'>Tax Rate</td></tr><tr><td width='190'><select name='item[]'><option value='' selected></option>" + (firstDropdownContent) + "</select></td><td width='90'><input name='quantity[]' type='text' size='5' /></td><td width='440'><input name='description[]' type='text' size='60' /></td><td width='120'><input name='amount[]' type='text' size='6' /></td><td><select name='taxid[]'><option value='' selected></option>" + (secondDropdownContent) + "</select></td><td><a href='javascript: removeItem(\"row"+counter+"\")'>Remove</a></td></tr></table>";
          document.getElementById(div).appendChild(newdiv);
        }

        function removeItem(itemId){
            document.getElementById('dynamicInput').removeChild(document.getElementById(itemId));
        }

  </script>
  <button onclick="add('dynamicInput')">Add</button>
  <div id="dynamicInput"></div>

Just adapt it to your current code and it should work.