Delete Selected Checkboxes from database using Javascript in Laravel 5.4?

Question

I'm here again to ask for a help. I have a pagination page result in my page view. When I selected 2 or more rows in the list of results using checkbox I want to remove them from the list as well as from my database using a button placed outside the pagination. I found a JS script that could remove them from the list but it cannot remove it the database. I can visualize what I want to happen but I am not so familiar with JS scripting, I do enter code here not know how to include a script inside that could remove the array of selected (ids) of data rows and remove it from the DB. Please can someone evaluate my code and teach me where and how to do this. I am really stacked here. Cannot proceed unless I get the solution to my BIG problem.

Here's the JS script... It's working perfectly

    <script>
  function delBoxes(){
    var e = document.getElementsByName("chkrow");
    var message  = 'Are you sure you want to delete?';
    var row_list = {length: 0};

    for (var i = 0; i < e.length; i++) {
        var c_box = e[i];

        if (c_box.checked == true) {
            row_list.length++;

            row_list[i] = {};
            row_list[i].row = c_box.parentNode.parentNode;
            row_list[i].tb  = row_list[i].row.parentNode;
        }
    }

    if (row_list.length > 0 && window.confirm(message)) {
        for (i in row_list) {
            if (i == 'length') {
                continue;
            }
            var r = row_list[i];
            r.tb.removeChild(r.row);
        }
    } else if (row_list.length == 0) {
        alert('Please select row to delete.');
    }
}
</script>

Here's the Href (button like)

                                  <span>
                              <a href="#" class="btn btn-default" onclick = "delBoxes();" style="border-radius: 0px;">Delete Selected</a></span>


Here's my Route: Route:: get('/postDelete_inv_selected','InvController@postDelete_inv_selected');


And my Controller (Unfixed until I can get the array of selected rows)

    public function postDelete_inv_selected(Request $request)

    {
           ///delete code here/ redirect back to pagination result
    }

Answer 1

UPDATED THE CODE BELOW:

I'm not sure if I understand your code correctly since you did not include the HTML of your code, but the way it looks, that should be deleting the rows already on your HTML as you have mentioned.

For the DB part, I suggest you collect the id of the items you'll delete somewhere in loop part on your code, making it look like this:

// array declaration    
var id_to_delete = [];

for (var i = 0; i < e.length; i++) {
    var c_box = e[i];
    if (c_box.checked == true) {
        row_list.length++;
        row_list[i] = {};
        row_list[i].row = c_box.parentNode.parentNode;
        row_list[i].tb  = row_list[i].row.parentNode;

        // collect the id of the rows to delete
        id_to_delete.push(c_box.value);
    }
}

// send a request to server
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/postDelete_inv_selected", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send( "id_to_delete=" + JSON.stringify(id_to_delete) );

probably with an html id or data- attribute (ie. <td data-id='1'> ).

Then pass it as a stringified json or an array on the route via AJAX request, then process the deletion on your controller.

Also, it would be best to replace the route with post rather than get .

NOTE: I haven't tested these lines, but I'm pretty sure you get the idea on where to start.