javascript - removeChild 导致错误

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

假设你有这个数组[a,b,c,d,e]。你想删除 b,c,d 所以你做了一个从 1 到 3 的循环(b,c,d 的数组索引)并删除索引 1，然后删除索引2，然后是索引 3。但是当您删除索引 1 时，您的数组变为 [a,c,d,e] 因此删除索引 2 会留下 [a,c,e]然后删除索引 3 给出 error - there is no index 3

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

无论如何，这是删除表单字段的更简洁的方法(我将 3 个文本字段设为要删除的文本字段，所以很明显它们已经消失了)

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

    <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="text" data-formid="1" name="item_name_1" value="item1">
        <input type="text" data-formid="1" name="amount_1" value="5">
        <input type="text" data-formid="1" name="quantity_1" value="1">
    </form>