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> 

希望这会帮助你。