Remove Item That Was Added After A XMLHttpRequest Happens

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 time

Solution 1:

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.