$(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
You could keep a reference to the added rows:
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 doAs an aside, don't use
"table#t1table"
as selector:"#t1table"
is identical and faster.