Trying to delete a row in a table based on cell value using Jquery

Question

I am trying to delete a row in a table in jquery. each row has a check box as its first cell. On clicking delete button , it should delete only rows whose checkbox is checked. Following is the code I am trying

function deleteRow(tableID) {
        var tableData = document.getElementById(tableID);
        var tabId = '#' + tableID + ' tr';
        var rowcount = $(tabId).length;         
        for ( var i = 0; i < rowcount; i++) {
            var chkbox = $(tableIDAct).children('td').eq(0).is(':checked');
                if (null != chkbox && true == chkbox) {
                    tableData.deleteRow(i);
                    rowcount--;
                    i--;
                }
        }
    }

Here I am not been able to iterate table by rows. Suggest me Thanks

Answer 1

probably the problem is that you are checking is(':checked') on td objects instead of inputs

var chkbox = $(tabId).eq(i)
    .children('td').eq(0)
    .children('input[type=checkbox]')
    .is(':checked');

http://jsfiddle.net/9fr2x93k/

Answer 2

I think you have use for this

document.getElementById("myTable").deleteRow(0);

you can delete one by one

   <table id="myTable">
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
      <tr>
        <td>cell 3</td>
        <td>cell 4</td>
      </tr>
    </table>
    <br> 

    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
        document.getElementById("myTable").deleteRow(0);
    }
    </script>

If more details then

http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721