文章/答案/技术大牛

发布

问removeChild引起的误差
EN

Stack Overflow用户

提问于 2017-08-06 17:43:26

回答 2查看 65关注 0票数 2

我有一个表格看起来是这样的：

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

因此，当某些东西试图删除第二个循环之后的第二个元素时，似乎会导致错误。

一段时间以来，我一直在试图找出是什么原因造成的，但我似乎想不出这一点。也许其他人能发现我的错误？

html

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-06 18:04:08

假设您有这个数组[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>

票数 0

Stack Overflow用户

发布于 2017-08-06 18:06:21

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45534860

复制

相似问题

问removeChild引起的误差
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问removeChild引起的误差EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问removeChild引起的误差
EN