我已经编写了一些代码来删除选中了复选框的容器内的父表。它可以在第一个元素上正常工作。
但是,当我尝试通过选中所有三个复选框来删除多个元素时,它会引发错误-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/