Javascript-選中復選框時刪除子表中的父表

Question

我已經編寫了一些代碼來刪除選中了復選框的容器內的父表。 它可以在第一個元素上正常工作。

但是，當我嘗試通過選中所有三個復選框來刪除多個元素時，它會拋出錯誤elements[i] becomes undefined 。

我已經看到了其他解決方案，但是它們似乎並不完全適用於我刪除容器中所有選定表的操作。

請讓我知道，我做錯了。

 function deleteTables(tableClass,containerID){ var container = document.getElementById(containerID); var elements = container.getElementsByClassName(tableClass); var tableCount = elements.length; for(var i=0; i<tableCount; i++) { var inputList = elements[i].getElementsByTagName("input"); var inputListCount = inputList.length; for(var x=0; x<inputListCount; x++) { if (inputList[x].type == "checkbox" && inputList[x].checked == true) { container.removeChild(elements[i]); break; } } } } 

 <INPUT type="button" value="Delete Table" onclick="deleteTables('dataTable','test_div')" /> <DIV id="test_div"> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> </DIV> 

Answer 1

在break之前，您只需要一個--i 。

您已刪除了i處的元素，因此下一個原本應為i+1的元素現在將位於i 。 由於for (var i=0;...)循環將使i遞增，因此您必須對其遞減以抵消它。

另外，您可能應該擺脫tableCount=elements.length並直接在循環中使用elements.length ，因為您要tableCount=elements.length修改elements 。

Answer 2

您需要從tableCount值減去一個值（-1），也要在i值中減去

  function deleteTables(tableClass,containerID){ var container = document.getElementById(containerID); var elements = container.getElementsByClassName(tableClass); var tableCount = elements.length; for(var i=0; i<tableCount; i++) { var inputList = elements[i].getElementsByTagName("input"); var inputListCount = inputList.length; for(var x=0; x<inputListCount; x++) { if (inputList[x].type == "checkbox" && inputList[x].checked == true) { container.removeChild(elements[i]); tableCount--; i--; break; } } } } 

 <INPUT type="button" value="Delete Table" onclick="deleteTables('dataTable','test_div')" /> <DIV id="test_div"> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> <TABLE class="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk[]"/></TD> <TD><INPUT type="text" name="txtA[]"/></TD> <TD><INPUT type="text" name="txtB[]"/></TD> </TR> </TABLE> </DIV> 

希望這會幫助你。