CODEWITHSUNDEEP
javascripthtmlremovechild
David Wright
David Wright

Reputation: 31

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

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>

Upvotes: 0

Views: 295

Answers (2)

balachandar
balachandar

Reputation: 825

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.

Upvotes: 0

Chad
Chad

Reputation: 693

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.

Upvotes: 1

Related Questions