删除 XMLHttpRequest 发生后添加的项目

Question

我正在使用带有xmlhttp 的JavaScript 向我的表单添加另一个行项目。如果用户多次按下“添加订单项”按钮，我正在尝试弄清楚如何删除订单项，以便表单不会尝试从不必要的订单项中发布空值。

我不知道如何做到这一点，我认为它与 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 来删除它。

编辑：这是来自 javascript 内部的 html，更容易阅读。

<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

如果我理解你的问题，你想为每一行添加一个删除按钮。

基本上为此需要为添加的表设置一个动态id和一个按钮，该按钮将调用该函数以删除通过参数表id传递的行。

删除动态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>

只需将其调整为您当前的代码即可。