How to delete HTML row using jQuery and then update to database?

Question

Currently the following code is able to make the first 2 columns editable and process it and have it sent to PHP and update to db. I then tried a few code to remove a particular row with the JavaScript code but now it caused that editable and delete to not work altogether.

How to make both editable and delete row work again?

Edit the editable uses source from jquery.jeditable.mini.js

HTML code:

<table>
<tbody><tr>
    <th>Room Types</th>
    <th>Acronym</th>
    <th>Delete</th>
</tr>
<tr id="row-0">
    <td><div class="edit" id="Deluxe Family">Deluxe Family</div></td>
    <td><div class="edit" id="DLX (2K)">DLX (2K)</div></td>
    <td><div class="delete" id="DLX (2K)"><span class="ui-button-text">X</span></div></td>
</tr>
<tr id="row-1">
    <td><div class="edit" id="Deluxe Queen">Deluxe Queen</div></td>
    <td><div class="edit" id="DLX (2Q)">DLX (2Q)</div></td>
    <td><div class="delete" id="DLX (2Q)"><span class="ui-button-text">X</span></div></td>
</tr></tbody>

Javascript:

$(document).ready(function() {
    $('.edit').editable('process.php', {
        loadurl   : 'load.php',
        id        : 'rt_code',
        name      : 'rt_codevalue',
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.delete').click(function(){
        var del_id = $(this).attr('id');
        var rowElement = $(this).parent().parent(); //grab the row

        $.ajax({
                type:'POST',
                url:'process.php',
                data: delete_id : del_id,
                success:function(data) {
                    if(data == "YES") {
                       rowElement.fadeOut(500).remove();
                    } 
                    else {
                    }
                }
        });
    });
});

PHP:

if (isset($_POST['rt_code'])  {
    echo $_POST['rt_codevalue'];
}

if(isset($_POST['delete_id'])) {
    $data = "DELETE FROM roomtype WHERE RT_CODE = ".$_POST['delete_id'];
    if(query($data)) {
        echo "YES";
    }
}

Answer 1

I guess error is in your jquery ajax code change it to as following,

$.ajax({
            type:'POST',
            url:'process.php',
            data: {delete_id : del_id},
            success:function(data) {
                if(data == "YES") {
                   rowElement.fadeOut(500).remove();
                } 
                else {
                }
            }
    });

actually the data you have passed seems like an object but you forgot to put braces '{}' i mean

  data: delete_id : del_id, 

should be

data: {delete_id : del_id},