需要一个带有Checkbox的删除行功能，用于动态表单--DOM

Question

我需要一个删除功能，我已经尝试了各种各样的东西，在这个例子中我有2个不同的功能没有做任何事情。我刚把它留在这里寻求发展帮助。我能做的最多就是删除所有行，并且只想删除已经通过复选框检查的行和单击时删除按钮。这是我的第一篇帖子，所以借口如果格式错了。

        <script type="text/javascript">
        var counter = 1;
        var limit = 6;
        function addTextArea() {
         if (counter == limit-1) {
         alert("Maximum limit " + counter + " sorry");
         return false;
         }
         else {
         <!-- CAUTION THIS IS BACKWARDS. -->

         var newdiv = document.createElement('div');
         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_det[]' id=counter rows='3' cols='20'>";
         document.getElementById('div6').appendChild(newdiv);

         var newdiv = document.createElement('div');
         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_col' id=counter rows='3' cols='20'>";
         document.getElementById('div5').appendChild(newdiv);

         var newdiv = document.createElement('div');
         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_mod[]' id=counter rows='3' cols='20'>";
         document.getElementById('div4').appendChild(newdiv);

         var newdiv = document.createElement('div');
         newdiv.innerHTML = " " + (counter + 1) + " <br><input type='text' name='truck[]' id=counter>";
         document.getElementById('div3').appendChild(newdiv);

         var newdiv = document.createElement('div');
         newdiv.innerHTML = " " + (counter + 1) + " <br><input type='text' name='car[]' id=counter>";
         document.getElementById('div2').appendChild(newdiv);

         var newdiv = document.createElement('div');
         newdiv.innerHTML = "" + (counter + 1) + " <br><input type='checkbox' name='chk[]' id=counter>";
         document.getElementById('div1').appendChild(newdiv);

         counter++
         return true;
         }
        }
        </script>


        <script type="text/javascript">
        function  deleteRowS(dataTable) {
            for (var rowi= table.rows.length; rowi-->0;) {
                var row= table.rows[rowi];
                var inputs= row.getElementsByTagName('dataTable');
                for (var inputi= inputs.length; inputi-->0;) {
                    var input= inputs[inputi];

                    if (input.type==='checkbox' && input.checked) {
                        row.parentNode.removeChild(row);
                        break;
                    }
                }
            }
        }
        </script>   



        <script type="text/javascript">
        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<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 && true == chkbox.checked) {
                        table.deleteRow(i);
                     }
                }
        }</script>

        </head>
        <table>
        <tr><td valign='top'><b>NEED DELETE ROW WITH CHECKBOX FUNCTION:</td></tr>
        </table>
        <table id="dataTable" width="auto" style="margin:-4px 0 0 0; padding:14px 0 0 0;" cellspacing="10px"><tbody id="dataTable"></tbody>
        <tr>
        <td valign='Top'>
        &#x2717;
        <div id="div1">
        <input type="checkbox" name="chk[]" autocomplete="off" id="1" >
        </div>
        </td>

        <td valign='Top'>
        cars
        <div id="div2">
        <input type="text" name="car[]" id="2" >
        </div>
        </td>

        <td valign='Top'>
        trucks
        <div id="div3">
        <input type="text" name="truck[]" id="3" >
        </div>
        </td>

        <td valign='Top'>
        your favorite model
        <div id="div4">
        <textarea name="mod[]" id="4" rows="3" cols="20"></textarea>
        </div>
        <br><br>
        </td>

        <td valign='Top'>
        your favorite add-ons 
        <div id="div5">
        <textarea name="fav_col" id="5" rows="3" cols="20"></textarea> 
        </div>
        </td>

        <td valign='Top'>
        explain vehicle overall
        <div id="div6">
        <textarea name="fav_det" id="6" rows="3" cols="20"></textarea> 
        </div>
        </td>
        </tr>
        </table>
        <input type="button" value="Add another" onClick="addTextArea();" />&nbsp;
        <input type="button" value="Delete row" onclick="deleteRow('dataTable');deleteRowS('dataTable')" />