what is the best way to sum the values of a specific column in jqGrid?

I am making a invoice form, I am using jqGrid 7.8 to add new lines to the detail of the invoice, the user can add and delete lines, I need to sum the values of some specific columns, the columns price, tax, discount and total, the problem is that I need to sum in 2 different moments, the first is when the user adds a new line, the another is then he deletes a line. What the best way to sum these columns?

If this is important my jqGrid works local, add local and delete local, I don't need to do these add or delete on the server side.

This is my HTML code:

<table>
    <tbody>
        <tr>
            <td style="width: 60px;">Codigo</td>
            <td style="width: 150px;">Descripcion</td>
            <td style="width: 50px;">Cantidad</td>
            <td style="width: 50px;">Precio</td>
            <td style="width: 50px;">Impuesto</td>
            <td style="width: 50px;">Total</td>
        </tr>
        <tr>
            <td style="width: 60px;">
                <input type="text" id="txtCodigo" maxlength="100" value="" style="width: 60px;" />
            </td>
            <td style="width: 150px;">
                <input type="text" id="txtDescripcion" maxlength="100" value="" style="width: 150px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtCantidad" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtPrecio" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtImpuesto" maxlength="100" value="" style="width: 50px;" />
            </td>
            <td style="width: 50px;">
                <input type="text" id="txtTotal" maxlength="100" value="" style="width: 50px;" />
            </td>
        </tr>
    </tbody>
</table>

<input type="button" id="add" value="Add" />
<input type="button" id="delete" value="Add" />
<table id="grid"></table>

<table>
    <tbody>
        <tr>
            <td style="width: 120px;">Subtotal</td>
            <td style="width: 120px;">Impuesto</td>
            <td style="width: 120px;">Total</td>
        </tr>
        <tr>
            <td style="width: 120px;">
                <input type="text" id="txtSubtotalGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
            <td style="width: 120px;">
                <input type="text" id="txtImpuestoGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
            <td style="width: 120px;">
                <input type="text" id="txtTotalGeneral" maxlength="100" value="" style="width: 120px;" />
            </td>
        </tr>
    </tbody>
</table>

This is my jqgrid:

<script type="text/javascript">
var mydata = [
        { codigo: '0001', descripcion: 'Spoon', cantidad: '10', precio: '100',
            impuesto: '13', total: '100' }
    ];

$("#grid").jqGrid({
    data: mydata,
    datatype: 'local',
    editurl: "clientArray",
    //gridview: true,
    height: 'auto',
    //autoencode: true,
    rowNum: 3,
    colNames: ['Codigo', 'Descripcion', 'Cantidad', 'Precio', 'Impuesto', 'Total'],
    colModel: [
        { name: 'codigo', index: 'codigo', width: 60, sortable: false },
        { name: 'descripcion', index: 'descripcion', width: 60, sortable: false },
        { name: 'cantidad', index: 'cantidad', width: 60, formatter: 'integer', sortable: false },
        { name: 'precio', index: 'precio', width: 60, formatter: 'currency', sortable: false },
        { name: 'impuesto', index: 'impuesto', width: 60, formatter: 'currency', sortable: false },
        { name: 'total', index: 'total', width: 60, formatter: 'currency', sortable: false }
    ],
    caption: "Productos",
    formatter: {
        integer: { thousandsSeparator: " ", defaultValue: '0' },
        number: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' },
        currency: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: "", defaultValue: '0.00' }
    }
});
</script>

I am using a button named "add" to add the values to the new line in the grid:

<script type="text/javascript">
$('#add').click(function () {
    var Codigo = $("#txtCodigo").val();
    var Descripcion = $("#txtDescripcion").val();
    var Cantidad = $("#txtCantidad").val();
    var Precio = $("#txtPrecio").val();
    var Impuesto = $("#txtImpuesto").val();
    var Total = $("#txtTotal").val();
    var newData = {
        codigo: Codigo,
        descripcion: Descripcion,
        cantidad: Cantidad,
        precio: Precio,
        impuesto: Impuesto,
        total: Total
    };
    var rowId = $.jgrid.randId();
    $("#grid").jqGrid('addRowData', rowId, newData);
    var impuesto = $("#grid").jqGrid('getCol', 'impuesto', false,'sum');
    var total = $("#grid").jqGrid('getCol', 'total', false, 'sum');
    $("#txtSubtotalGeneral").val(total - impuesto);
    $("#txtImpuestoGeneral").val(impuesto);
    $("#txtTotalGeneral").val(total);
});
</script>

I am using a button named "delete" to delete a specific line in the grid:

<script type="text/javascript">
$("#delete").click(function () {
    var selRowId = $("#grid").jqGrid('getGridParam', 'selrow');
    if (selRowId != null) {
        $("#grid").jqGrid('delGridRow', selRowId, { reloadAfterSubmit: false });
        celValue = $("#grid").jqGrid('getCell', selRowId, 'total');
    }
    else alert("Please Select Row to delete!");
});
</script>

The problem in $("#delete").click(function () { }) is that this method delGridRow show a message 'Delete selected record(s)?' and I don't know how to know if the user selected 'yes' or 'cancel' in the dialog, I need to do this because I have to sustract these values of the final totals if the user selected 'yes'.