Question

我的表格看起来像这样：

    <form id="donate_form" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_cart">
        <input type="hidden" name="upload" value="1">
        <input type="hidden" name="business" value="">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="return" value="www.google.com">
        <input type="hidden" name="custom" id="donate_custom_input" value="">
    </form>

我还有一个按钮，按下时会调用一个向其添加3个新输入的函数。因此，按下按钮后，表单如下所示：

    <form id="donate_form" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_cart">
        <input type="hidden" name="upload" value="1">
        <input type="hidden" name="business" value="">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="return" value="www.google.com">
        <input type="hidden" name="custom" id="donate_custom_input" value="">
        <input type="hidden" data-formid="1" name="item_name_1" value="item1">
        <input type="hidden" data-formid="1" name="amount_1" value="5">
        <input type="hidden" data-formid="1" name="quantity_1" value="1">
    </form>

现在我正在尝试创建一个能够从表单中删除3个输入的按钮。

所以我写了以下函数：

function removeFromForm(id)
{
    var formChilds = form.children; //Get array of children elements

    //formChildrenOffset = the amount of children in the form before the 3 new elements were added, so 6
    for(var i = formChildrenOffset;i < formChilds.length;i++)
    {
        if(formChilds[i].dataset.formid == id) //once we found an element with formID equal to the id of the elements we want to delete
        {
            for(var j = i; j < i+3; j++) //run a loop 3 times, to remove the 3 elements
                form.removeChild(formChilds[j]); //this seems to cause the error when j is 1

            break; //no need to go through the rest of the elements, so break;
        }
    }

}

问题是，当我调用该函数时，它给出了以下错误：

   Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter        
   1 is not of type 'Node'.
       at removeFromForm (script.js:113)
       at RemoveFromCart (script.js:81)
       at HTMLButtonElement.onclick (shop.php:1)

表格最终看起来像这样：

    <form id="donate_form" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_cart">
        <input type="hidden" name="upload" value="1">
        <input type="hidden" name="business" value="rspslegendx-facilitator@gmail.com">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="return" value="www.google.com">
        <input type="hidden" name="custom" id="donate_custom_input" value="">
        <input type="hidden" data-formid="1" name="amount_1" value="5">
    </form>

因此，当第二次循环后尝试删除第二个元素时，似乎会出现错误。

我一直试图弄清楚什么原因造成了一段时间，但我似乎无法弄明白。也许别人可以发现我的错误？

Answer 1

假设你有这个数组urlSession.invalidateAndCancel()。你想删除[a,b,c,d,e]所以你从1到3（b,c,d的数组索引）进行循环并删除索引1，然后索引2，然后索引3.但当你删除索引1时你的数组变为b,c,d因此删除索引2会离开[a,c,d,e]然后删除索引3会产生[a,c,e]

要修复此问题，请从删除元素时使用的迭代器中减去1，或者向后迭代数组，或者继续删除相同的数组索引j次。

无论如何，这里有更简洁的方法来删除表单字段（我将3删除为文本字段，因此很明显它们已经消失了）

＆＃13;

error - there is no index 3

＆＃13;

function removeFromForm(id) {
  var f = document.querySelector("#donate_form");
  var inps = f.querySelectorAll("input[data-formid='" + id + "']");
  for (var i=inps.length - 1; i >= 0; i--) {
    f.removeChild(inps[i]);
  }
}
removeFromForm(1);

＆＃13;

Answer 2

将form.removeChild(formChilds[j]);更改为form.removeChild(formChilds[i]);。问题是当您删除表单元素时，您的数组长度正在发生变化并导致异常。

function removeFromForm(id)
{
  var form = document.getElementsByTagName('form')[0];
    var formChilds = form.children; //Get array of children elements

    //formChildrenOffset = the amount of children in the form before the 3 new elements were added, so 6
    for(var i = 6;i < formChilds.length;i++)
    {
        if(formChilds[i].dataset.formid == id) //once we found an element with formID equal to the id of the elements we want to delete
        {
            for(var j = i; j < i+3; j++) //run a loop 3 times, to remove the 3 elements
                form.removeChild(formChilds[i]); //this seems to cause the error when j is 1

            break; //no need to go through the rest of the elements, so break;
        }
    }

}
removeFromForm(1);

<form id="donate_form">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="upload" value="1">
  <input type="hidden" name="business" value="">
  <input type="hidden" name="currency_code" value="EUR">
  <input type="hidden" name="return" value="www.google.com">
  <input type="hidden" name="custom" id="donate_custom_input" value="">
  <input type="hidden" data-formid="1" name="item_name_1" value="item1">
  <input type="hidden" data-formid="1" name="amount_1" value="5">
  <input type="hidden" data-formid="1" name="quantity_1" value="1">
</form>

removeChild导致错误

2 个答案: