I think should be the js that one. Can print screen the js response?

add alert(msg); before comparism to debug what is the return.

sorry i didn't understand where to alert(msg); exactly.

.done(function( msg ) { //when the ajax done(the return of the delete-action.php will be set into msg
            alert(msg);
            if(msg == "Success"){
                /*using the clicked button to find the nearest parent with the class name to delete*/
                btn_dlt.closest('.tr').remove();
            }else{
                $('#err_msg').html(msg); //to write the message into err_msg field
            }
        });

I did. Now when i click delete button, a popup message appears with the text "Succes" and when i click the "ok" button, the alert message disappers and a message appears above the html table with the text "Success" again, and the html table still won't refresh itself.

you comaparing "Succes" with "Success". That's why not matched

If that doesn't work either, sorry to tell you this but I can't seem to debug why the code not working properly.

oops! no sorry, i typed succes here in my last post wrongly, was my typing mistake. both messages were "Success", i checked again.

oh...what a complicated problem! ok, thank you for all answers.

WOW :) I finally found where the problem comes from!
I changed this:
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
With this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
And then when i clicked delete button, the alert message pointed at that html part you asked me to delete from delete-action.php, and now when i click delete button, a popup message appears with text "Success" and the html table refresh itself at the same time, great:)

Nice that you found out by yourself