How to delete multiple rows of a table with Jquery and ajax?

How to delete multiple rows of a table with Jquery and ajax?

I want to be able to delete checkbox-selected rows but when I click on "Delete Selected", but I have the following limitations:

1. Can only delete the first row no matter which checkbox I tick
2. Deletion only take place the first time or if I refresh the page.

I want to be able to delete selected rows, and delete them whenever I please without having to refresh the page.


datatable.php 
  1. <a type="button" class="delete_all btn">Delete Selected</a>

<script type="text/javascript">

$(document).ready(function($)
{
function create_html_table (tbl_data) {

tbl +='<table>';
tbl +='<thead>';
tbl +='<tr>';

tbl +='<th rowspan="3"><input type="checkbox" id="master"></th>';
// More table headers
tbl +='</tr>';
tbl +='</thead>';

tbl +='<tbody>';

          $.each(tbl_data, function(index, val) 
            {   
                var row_id = val['row_id'];

                //loop through ajax row data
                tbl +='<tr id="row" row_id="'+row_id+'">';

                    tbl +='<td><input type="checkbox" class="sub_chk"></td>';
                    tbl +='<td>'+(index + 1)+'</td>';
                    tbl +='<td><div col_name="filename">'+val['filename']+'</div></td>';
                    // More data
                tbl +='</tr>';
             });

tbl +='</tbody>';
tbl +='</table>';
}

var ajax_url = "<?php echo APPURL;?>/ajax.php" ;

// Multi-select
$(document).on("click","#master", function(e) {

if($(this).is(':checked',true))  
{
    $(".sub_chk").prop('checked', true);  
}  
else  
{  
    $(".sub_chk").prop('checked',false);  
}  
});

//Delete selected rows
$(document).on('click', '.delete_all', function(event) 
{
    event.preventDefault();

    var ele_this = $('#row') ;
    var row_id = ele_this.attr('row_id');

    var allVals = [];
    $(".sub_chk:checked").each(function()
    {    
    allVals.push(row_id);
    });

    if(allVals.length <=0)  
    {  
        alert("Please select row.");  
    }

    else {

    var data_obj=
    {
        call_type:'delete_row_entry',
        row_id:row_id,
    };  

    ele_this.html('<p class="bg-warning">Please wait....deleting your entry</p>')

    $.post(ajax_url, data_obj, function(data) 
    { 
        var d1 = JSON.parse(data); 
        if(d1.status == "error")
        {
            var msg = ''
            + '<h3>There was an error while trying to add your entry</h3>'
            +'<pre class="bg-danger">'+JSON.stringify(data_obj, null, 2) +'</pre>'
            +'';

        }
        else if(d1.status == "success")
        {
            ele_this.closest('tr').css('background','red').slideUp('slow');              
        }
    });

    }   

});

});

</script>

ajax.php 
  1. if(isset($_POST['call_type']) && $_POST['call_type'] =="delete_row_entry")
{   

$row_id = app_db()->CleanDBData($_POST['row_id']);   

$q1 = app_db()->select("select * from data where row_id='$row_id'");
if($q1 > 0) 
{
    //found a row to be deleted
    $strTableName = "data";

    $array_where = array('row_id' => $row_id);

    //Call it like this:
    app_db()->Delete($strTableName,$array_where);

    echo json_encode(array(
        'status' => 'success', 
        'msg' => 'deleted entry', 
    ));
    die();
}    
}