删除XMLHttpRequest发生后添加的项目 [英] Remove item that was added after a XMLHttpRequest happens

问题描述

我使用JavaScript与 xmlhttp 将其他订单项添加到我的表单中。我试图找出如何删除订单项，如果用户多次按下添加订单项按钮，以便表单不尝试并从不必要的订单项中发布空值。

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.

我对如何做到这一点感到迷茫，我认为它与remove（）有关，但我不确定如何合并它。

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.

以下是我的JavaScript代码

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');">

然后我简单地用div来放置它。

And then I simply use a div to place it.

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

如果您可以提供帮助，请提前致谢。我可能会在每个行项目旁边放一个gif来删除它。

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

编辑：这里是javascript内部的html，稍微容易阅读。

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.

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

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.

删除动态div的一个项目的功能：

Function to remove an item of the dynamic div:

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

这是您的更新代码，无需创建行并将其删除的ajax请求：

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.

这篇关于删除XMLHttpRequest发生后添加的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！