Question

I’ve been editing someone else’s code for a project, and I stumble every now and then when trying to figure how certain Javascript functions are doing their thing.

Essentially I want to add a remove row button, however it’s causing headaches.

So the text for the dynamically generated row is done by this PHP variable:

$rowtext .= '<tr>something</tr>';

and then the function to generate the row in Javascript:

function generateRow(x) {';
            var row_prototype = \'' . $rowtext . '\';
            return row_prototype.replace(/\[index\]/g, x);
            }

When the add row button is clicked it performs this action:

rowIndex = 1;
function addRow() {
            var nr = generateRow(rowIndex); 
            rowIndex = rowIndex + 1;
            jQuery(\'tbody\').append(nr);';
}

I’d presume I’d need to do a similar function to be performed on click, taking into account the rowIndex etc.

Anyone have any ideas?

Answer 1

Essentially it’s to remove the last row that has been generated by the above code… so remove row rowIndex == 5 or something

Since you mentioned last row in the comments you can use :last selector to get the last row, Try something like below,

$('#removeRow').click(function () {
    $('#table_selector tbody tr:last').remove();
});

And a button like below somewhere in your markup,

<button id="removeRow">Remove a Row</button>

Note: you need to revise #table_selector tbody with specific table ID/Class.