Remove added set of rows

Question

$(document).on('click', '#add', function () {
    var newItemHTML = "<tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>First Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Middle Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Last Name</i></small> </center></td></tr><tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>City/Province</i></small></center></td><td><center><input type='text' name='' id=''/><br> <small><i>Town/Municipality</i></small></center></td><td><center><input type='text' name='' id='caseinfocomplaintlname' /><br> <small><i>Barangay/District</i></small></center></td> </tr><tr class='additionalcomplainant'><td><center><input type='text' name= id='' /><br> <small><i>Contact Number</i></small></center></td></tr>";
    $("table#t1table tr").last().before(newItemHTML);
});

$(document).on('click', '#remove', function () {

});

This is how i add row in my table using jquery. How would i remove the same set of rows on another button click. I want to remove these rows if for example the user mis-clicked the button and there is more than rows than needed

Answer 1

You could keep a reference to the added rows:

var addedRows = [];
$(document).on('click', '#add', function() {
    var $row = $("<tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>First Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Middle Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Last Name</i></small> </center></td></tr><tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>City/Province</i></small></center></td><td><center><input type='text' name='' id=''/><br> <small><i>Town/Municipality</i></small></center></td><td><center><input type='text' name='' id='caseinfocomplaintlname' /><br> <small><i>Barangay/District</i></small></center></td> </tr><tr class='additionalcomplainant'><td><center><input type='text' name= id='' /><br> <small><i>Contact Number</i></small></center></td></tr>");
    addedRows.push($row);
    $("#t1table tr").last().before($row);
});

$(document).on('click', '#remove', function() {
    var $row = addedRows.pop();
    if ($row) $row.remove();
});

In the above code, I keep an array. The added rows are pushed to the end on addition, and they're removed (using pop) from the end on removal. An advantage is that would still work if you decide to add at random places in the table.

Or, assuming there aren't any other .additionalcomplainant row than the one you add, you may do

$(document).on('click', '#remove', function() {
    $('#t1table .additionalcomplainant').last().remove();
});

As an aside, don't use "table#t1table" as selector: "#t1table" is identical and faster.

Answer 2

Just remove the last row,

$(document).on('click', '#remove', function () {

    $("table#t1table tr:last").remove()

});

Answer 3

To append to the table:

$('#myTable tbody').append(newItemHTML);

To remove added rows:

$('#myTable .additionalcomplainant:last').remove();

Answer 4

Option # 1

Remove by class name. You added rows with classname = "additionalcomplainant", thus you can simply delete them using CSS selector for this class

$(document).on('click', '#remove', function () {
    $(".additionalcomplainant").remove();
});

Option # 2

When you add new rows add some temporary classname to them. If you want to delete them use selector for this class. If you want to add some rows after last "add" operation then remove temporary class from added rows and add it again to recently added.

$(document).on('click', '#add', function () {
    var tbl = $("table#t1table tr");
    var newRows = $(...).addClass('extraRows');
    tbl.find('tr').removeClass('extraRows');
    tbl.last().before(newRows);
});

$(document).on('click', '#remove', function () {
    $("table#t1table tr").find(".extraRows").remove();
});

Option # 3

If this classname is not unique and you cannot change it, then remember how much rows were inside table before addition and remove those that are outside that range

var options.rows = {
    rowsCount : 0
};

$(document).on('click', '#add', function () {
    var tbl = $("table#t1table tr");
    var newRows = ...
    options.rows = tbl.find('tr').length;
    tbl.last().before(newRows);
});

$(document).on('click', '#remove', function () {
    $("table#t1table tr").find("tr:gt(" + options.rows + ")")
});