Javascript - 选中复选框时删除子表中的父表

Question

我编写了一些代码来删除选中复选框的容器内的父表。它可以正确地作用于第一个元素。

但是当我尝试通过选中所有三个复选框来删除多个元素时，它会抛出错误 - elements[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]);
				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

您只需要一个--i之前break .

您已删除 i 处的元素，所以下一个，应该是 i+1 ，现在位于 i 。自 for (var i=0;...)循环将递增 i ，你必须减少它来抵消它。

此外，您可能应该删除 tableCount=elements.length并使用elements.length直接在循环中，因为您正在修改 elements随你走。