Удалить элемент, который был добавлен после получения XMLHttpRequest

Question

Я использую JavaScript с xmlhttp, чтобы добавить еще одну позицию в мою форму. Я пытаюсь выяснить, как удалить позицию, если пользователь многократно нажимает кнопку «Добавить позицию», чтобы форма не пыталась и не публиковала пустые значения из ненужной позиции.

Я потерялся от того, как это сделать, я думаю, что это имеет какое-то отношение к remove(), но я не уверен, как его включить.

Вот мой код JavaScript

<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> 

Вот моя кнопка

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

А потом я просто использовать DIV, чтобы поместить его.

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

Заранее спасибо, если вы можете помочь. Вероятно, я просто разместил бы gif рядом с каждой позицией, чтобы удалить ее.

Редактировать: Вот html изнутри javascript, немного легче читать.

<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 /> 

Answer 1

Если я правильно понял ваш вопрос, вы хотите добавить одну кнопку удаления для каждой строки.

В основном для этого необходимо установить один динамический идентификатор для добавленной таблицы и одну кнопку, которая вызовет функцию для удаления строки, передающей по параметру идентификатор таблицы.

Функция удаления элемента динамической DIV:

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

Это ваш обновленный код без Ajax запроса для создания строк и удалить его:

<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> 

Просто адаптировать его к току код, и он должен работать.