jQuery - remove content without refreshing page by Norlihazmey Ghazali

http://stackoverflow.com/questions/32389588/how-i-can-do-dialog-box-with-jquery/32389871?noredirect=1#comment52650391_32389871

by Norlihazmey Ghazali

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Operation</th>
    </tr>
    <tr>
        <td>John</td>
        <td> <a href="#" data-id="1" class="btnDelete">delete</a>

        </td>
    </tr>
    <tr>
        <td>Johny</td>
        <td> <a href="#" data-id="2" class="btnDelete">delete</a>

        </td>
    </tr>
    <tr>
        <td>John WHo</td>
        <td> <a href="#" data-id="3" class="btnDelete">delete</a>

        </td>
    </tr>
</table>

JavaScript

$(document).on('click', '.btnDelete', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    var $this = $(this);

    alert('My data id is ' + id);

    if ( confirm('Are you sure to delete this data???') ){
        $.ajax({
            type: 'POST',
            data: {
                id: id
            },
            url: 'serverSideProcessToDelete.php',
            success: function (data) {
                // on success operation
                // remove DOM element from page
                if ( +data == 1) {
                    $this.closest('tr').remove();
                	alert('Success Delete Data');
                } else {
                    alert('Failed Delete Data');
                }
                
            }
        });
    }
});