remove row by custom delete button jqgrid

Question

I want to delete rows using a custom delete button. I am using the code snippet below:

    var cellValue;
    var id;
    $gvRoleDetails = jQuery("#gvRoleDetails");
    $gvRoleDetails.jqGrid({
        datatype: 'local',
        colNames: ['Role', 'Module', 'Function', 'AppRoleID', 'AppID', 'AppModuleID', 'AppFncID', 'PermCreate', 'PermEdit', 'PermView', 'PermDelete', 'PermAuth', 'PermCancel','RoleOrgID','Remove'],
        onSelectRow: function (id) {
            var rowData = jQuery(this).getRowData(id);
            cellValue = rowData['AppFncID'];
        },
        colModel: [
            { name: 'Role', index: 'Role', width: 200 },
            { name: 'Module', index: 'Module', width: 200 },
            { name: 'Function', index: 'Function', width: 200 },
            { name: 'AppRoleID', index: 'AppRoleID', hidden: true },
            { name: 'AppID', index: 'AppID', hidden: true },
            { name: 'AppModuleID', index: 'AppModuleID', hidden: true },
            { name: 'AppFncID', index: 'AppFncID', hidden: true, key: true },
            { name: 'PermCreate', index: 'PermCreate', hidden: true },
            { name: 'PermEdit', index: 'PermEdit', hidden: true },
            { name: 'PermView', index: 'PermView', hidden: true },
            { name: 'PermDelete', index: 'PermDelete', hidden: true },
            { name: 'PermAuth', index: 'PermAuth', hidden: true },
            { name: 'PermCancel', index: 'PermCancel', hidden: true },
            { name: 'RoleOrgID', index: 'RoleOrgID', hidden: true },
            {                    
                name: 'Remove', index: 'AppFncID', sortable: false,
           formatter: function (rowId, cellval, colpos, rwdat, _act) {
                    var rowInterviewId = colpos.AppFncID.toString();
                    return '<input type="button" id="' + rowInterviewId + '" value="Remove" class="btn" onClick = "RemoveData(this)" />';
                }
            }
        ],
        rowNum: 10,
        gridview: true,
        autoencode: true,
        height: "auto",
        pager: '#jQGridDemoPager',
        sortname: "Role",
        multiselect: false,
        viewrecords: true,
        sortorder: "desc",
    });

The RemoveData function uses to pass the selected row value for deletion:

function RemoveData(rowData) {

                alert(rowData);
            }   

How can I use the same structure to delete the rows by using function RemoveData(rowData)?

Answer 1

I have pass rowData.id for remove after assign in rowid variable then it worked well.

function RemoveData(rowData) {
                    var rowid = rowData.id;               
                    var su = $('#gvRoleDetails').jqGrid('delRowData', rowid);              
                    $('#gvRoleDetails').trigger('reloadGrid');
                }