我已经编写了一些代码来删除选中了复选框的容器内的父表。它可以在第一个元素上正常工作。

但是,当我尝试通过选中所有三个复选框来删除多个元素时,它会引发错误-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>

最佳答案

您只需在--i之前添加一个break

您已删除了i处的元素,因此下一个原本应位于i+1处的元素现在将位于i处。由于for (var i=0;...)循环将递增i,因此您必须递减以抵消它。

另外,您可能应该摆脱tableCount=elements.length并直接在循环中使用elements.length,因为您正在修改elements

关于javascript - Javascript-选中复选框时删除子表中的父表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33864608/

10-16 15:37
查看更多