Javascript - Remove Parent Table within child tables when checkbox is checked

Question

I've wrote some code to remove the parent tables within a container where a checkbox is checked. It works on the first element properly.

But when I try to remove multiple elements by checked all three checkboxes, it throws error - elements[i] becomes undefined .

I've seen other solutions for doing this but they don't seem to apply exactly to what I'm doing with removing all selected tables within a container.

Please let me know, what I'm doing wrong.

 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

You just need a --i before the break .

You've removed the element at i , so the next one, which would have been at i+1 , will now be at i . Since the for (var i=0;...) loop will increment i , you have to decrement it to counter that.

Also, you should probably get rid of tableCount=elements.length and use elements.length directly in the loop, since you're modifying elements as you go.

Answer 2

You need to minus one value (-1) from the tableCount value and also in i value

  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> 

Hope this will help you.