Delete row wise record in interactive report Oracle APEX

How to Delete row wise record in interactive report Oracle APEX?

I was asked recently how I implemented the deleting of a row my Demo , so I thought I would post the answer here in case anyone else was curious.We will make it possible to remove a line from an interactive / Classic Report.
Let's start.

• First Create your Report using sql query:

SELECT EMPNO     "EMPNO"
     , ENAME     "Name"
     , JOB       "Job"
     , HIREDATE  "Hire Date"
     , SAL       "Salary"
  FROM EMP;

•    To complete the deletion of a row you need to add a link column to your report for the delete icon with the following attributes: 

   Target URL:= javascript:void(0);

   Link Text:= <i class="fa fa-trash" aria-hidden="true"></i>

Link Attributes:= onclick="delete_rec(this, #EMPNO#)" title="Click to delete this employee"

• The next step is to create an on AJEX Call back process that will delete a record from base table which is EMP.The process name is "DELETE_REC".

BEGIN
  DELETE FROM emp
  WHERE empno = apex_application.g_x01
    AND 1=2;
 -- commit;
END;

• Declare below code in Function and Global Variable Declaration under the JavaScript section.JavaScript function delete_rec which will be executed once the primary key link column is clicked

function delete_rec(p_val, p_row) {
    var rec = $(p_val).closest('tr');
    apex.server.process(
        'DELETE_REC', // Process or AJAX Callback name
    {
        x01: p_row
    }, // Parameter "x01"
    {
        beforeSend: function () {
            alert('Are you sure want to delete this record');
            rec.removeClass('vikas');
            rec.removeClass('pandey');
            rec.children().hover(function () {
                rec.children().animate({
                    'backgroundColor': '#71e817'
                }, 300);
            },
                function () {
                rec.children().animate({
                    'backgroundColor': '#71e817'
                }, 300);
            });
            rec.children().animate({
                'backgroundColor': '#71e817'
            }, 300);
        },

        success: function (pData) {

            // Success Javascript
            rec.children().wrapInner('<div>').children().fadeOut(500,
                function () {
                rec.remove(); // visually remove the row from the report
            });
        },
        dataType: "text" // Response type (here: plain text)
    });
}

Demo