title: Need a delete row function with Checkbox for dynamic form --DOM
body: <p>I need a delete function, I have tried all sorts of things and in this instance I have 2 different functions does not do anything. I just left it here for developmental help. The most I am able to do is delete all rows, and only want to delete rows which have been checked by checkbox and button deletes on click. This I is my first post, so excuse If format wrong. </p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
          var counter = 1;
          var limit = 6;
          function addTextArea() {
           if (counter == limit-1) {
           alert("Maximum limit " + counter + " sorry");
           return false;
           }
           else {
           &lt;!-- CAUTION THIS IS BACKWARDS. --&gt;
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "" + (counter + 1) + " &lt;br&gt;&lt;textarea name='fav_det[]' id=counter rows='3' cols='20'&gt;";
           document.getElementById('div6').appendChild(newdiv);
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "" + (counter + 1) + " &lt;br&gt;&lt;textarea name='fav_col' id=counter rows='3' cols='20'&gt;";
           document.getElementById('div5').appendChild(newdiv);
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "" + (counter + 1) + " &lt;br&gt;&lt;textarea name='fav_mod[]' id=counter rows='3' cols='20'&gt;";
           document.getElementById('div4').appendChild(newdiv);
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = " " + (counter + 1) + " &lt;br&gt;&lt;input type='text' name='truck[]' id=counter&gt;";
           document.getElementById('div3').appendChild(newdiv);
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = " " + (counter + 1) + " &lt;br&gt;&lt;input type='text' name='car[]' id=counter&gt;";
           document.getElementById('div2').appendChild(newdiv);
  
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "" + (counter + 1) + " &lt;br&gt;&lt;input type='checkbox' name='chk[]' id=counter&gt;";
           document.getElementById('div1').appendChild(newdiv);
  
           counter++
           return true;
           }
          }
          &lt;/script&gt;
  
  
          &lt;script type="text/javascript"&gt;
          function  deleteRowS(dataTable) {
              for (var rowi= table.rows.length; rowi--&gt;0;) {
                  var row= table.rows[rowi];
                  var inputs= row.getElementsByTagName('dataTable');
                  for (var inputi= inputs.length; inputi--&gt;0;) {
                      var input= inputs[inputi];
  
                      if (input.type==='checkbox' &amp;&amp; input.checked) {
                          row.parentNode.removeChild(row);
                          break;
                      }
                  }
              }
          }
          &lt;/script&gt;   
  
  
  
          &lt;script type="text/javascript"&gt;
          function deleteRow()  {
                  var table = document.getElementById(tableID).tBodies[0];
                  var rowCount = table.rows.length;
  
                  // var i=1 to start after header
                  for(var i=1; i&lt;rowCount; i++) {
                      var row = table.rows[i];
                      // index of td contain checkbox is 8
                      var chkbox = row.cells[6].getElementsByTagName('input')[0];
                      if('checkbox' == chkbox.type &amp;&amp; true == chkbox.checked) {
                          table.deleteRow(i);
                       }
                  }
          }&lt;/script&gt;
  
          &lt;/head&gt;
          &lt;table&gt;
          &lt;tr&gt;&lt;td valign='top'&gt;&lt;b&gt;NEED DELETE ROW WITH CHECKBOX FUNCTION:&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
          &lt;table id="dataTable" width="auto" style="margin:-4px 0 0 0; padding:14px 0 0 0;" cellspacing="10px"&gt;&lt;tbody id="dataTable"&gt;&lt;/tbody&gt;
          &lt;tr&gt;
          &lt;td valign='Top'&gt;
          &amp;#x2717;
          &lt;div id="div1"&gt;
          &lt;input type="checkbox" name="chk[]" autocomplete="off" id="1" &gt;
          &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td valign='Top'&gt;
          cars
          &lt;div id="div2"&gt;
          &lt;input type="text" name="car[]" id="2" &gt;
          &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td valign='Top'&gt;
          trucks
          &lt;div id="div3"&gt;
          &lt;input type="text" name="truck[]" id="3" &gt;
          &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td valign='Top'&gt;
          your favorite model
          &lt;div id="div4"&gt;
          &lt;textarea name="mod[]" id="4" rows="3" cols="20"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;/td&gt;
  
          &lt;td valign='Top'&gt;
          your favorite add-ons 
          &lt;div id="div5"&gt;
          &lt;textarea name="fav_col" id="5" rows="3" cols="20"&gt;&lt;/textarea&gt; 
          &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td valign='Top'&gt;
          explain vehicle overall
          &lt;div id="div6"&gt;
          &lt;textarea name="fav_det" id="6" rows="3" cols="20"&gt;&lt;/textarea&gt; 
          &lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input type="button" value="Add another" onClick="addTextArea();" /&gt;&amp;nbsp;
          &lt;input type="button" value="Delete row" onclick="deleteRow('dataTable');deleteRowS('dataTable')" /&gt;
  </code></pre>