Remove html table row using javascript or jquery?

Remove html table row using javascript or jquery?

I have a dynamic table in my html form that has functionality to add/drop
rows. The name of each element has a number appended to the end of it
specifying the row number (e.g. ID.0 , ID.1 , etc.). I have written this
function to attempt to remove each row as well as update the name of each
element:
function remove() {
var theName=getItemNames();
var counter=theName.length;
var index=0;
f.preventDefault();
$(this).parents("tr").remove();
counter--;
$('input[name*="Id."]').each(function() {
$(this).attr("name", "Id."+index);
index++;
});
$('input[name*="Date."]').each(function() {
$(this).attr("name", "Date."+index);
index++;
});
$('input[name*="Value."]').each(function() {
$(this).attr("name", "Value."+index);
index++;
});
$('input[name*="Required."]').each(function() {
$(this).attr("name", "Required."+index);
index++;
});
}
This, however, removes only the remove button and not the entire row as I
expected it to. Can anyone see what I'm doing wrong?