Question

I need solution of auto hide/remove table-rows of deleted records.

Suppose a table-body element with id ‘tbody’ and table-rows (tr) with records’ id:

<table>
<tbody id="tbody">
@foreach (var user in Model) {
    
    <tr id="@user.ID">
        <td>@user.ID</td>
        <td>@user.FullName</td>
    </tr>        
}
    </tbody>
</table>

Here is the code to update new rows in the same table, but my question is how to delete/hide rows:

$.ajax( {
        url: '/Controller/Action',
        type: 'post',
        success: function ( result )
        {
            if ( result.length >= $( '#tbody' ).find( 'tr' ).length )
            {
                $.each( result, function ( i, v )
                {
                    if ( !$( 'tbody tr#' + v.ID ).length )
                    {
                        $( '# tbody' ).append( 
                              '<tr id="' + v.ID + '">'
                            + '<td>' + v.FullName + '</td>'
                            + '</tr>' );
                    }
                } );
            }
            else
            {
        /*
            It seems that one or more records in the 'result' object
            is deleted/removed.
       
            Compare table rows and the 'result' object’s records.
            Delete/hide all rows that are not found/matched in 'result' object.
        */   

            }
        }
    } );

I want to put some code in the ‘else’ block to hide rows that do not exist in the ‘result’ object.

And the object I’m calling looks like this:

var result = new
{
    ID = 1,
    FullName = "Muaz Khan"
};

I myself tried following technique to hide the rows of deleted records:

else {
    $.each( result, function ( i, v )
        {
             if ( $( '#tbody tr#' + v.ID ).length ) // if exist
             {
                  $( '#tbody tr#' + v.ID ).addClass( 'not-deleted' );
             }
             // hide all rows with no class: 'not-deleted'
        // $(‘#tbodytr’).notHasClass(‘not-deleted’).hide();
        } );
}

There is no method ‘notHasClass’. Also, this is not a good workaround.

I also played with a lot of jquery selectors like :not() etc. but vain. I also unable to take advantage of hasClass() jquery method.

So the last workaround left is to show anchor-link or button element and to prompt the end-user to click to refresh the full-table rows. It’s too bad. I need a solution for auto hide rows of deleted records.

Also, please bear in mind that I don’t want to refresh the whole table. It’s too bad to play with DOM if you have other choices.

Can you let me know how to delete appropriate table rows; table rows of the records that are deleted.

Answer 1

You should use jQuery remove method to delete particular DOM element.

Like

$( '#tbody tr#' + v.ID ).remove();

http://api.jquery.com/remove/