removeChild之造成错误

我有一个看起来像这样的形式：removeChild之造成错误

<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="[email protected]"> 
     <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>

因此，似乎有东西在尝试删除第二个元素时导致错误在第二次循环之后。

我一直在试图弄清楚什么导致它现在一段时间，但我似乎无法弄清楚。也许别人可以发现我的错误？

来源

2017-08-06 stav

假设你有这个阵列[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

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

反正这里的移除表单字段更简洁的方式（我做了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>

来源

2017-08-06 18:04:08 James

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

来源

2017-08-06 18:06:21

removeChild之造成错误

回答

相关问题