Decrement of JAVASCRIPT forms

Question

I have a code when the person clicks add the code generates other languages.. but how do I have the option to delete in each form? Note: I do not want to delete the last one added and yes a certain.

var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

Answer 1

From an id to the added td and remove using this id example below:

var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr id="author-'+counter+'"><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td onclick="remove('+counter+')">x</td></tr>');
    jQuery('table.authors-list').append(newRow);
});

function remove(a){
  $('#author-'+a).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

Answer 2

Use another column with a button and in the event onClick of that button, you add $(this).parents('tr').remove();

Ex:

var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td><td><button type="button" onClick="$(this).parents(\'tr\').remove()">Remover</button></td></tr>');
    jQuery('table.authors-list').append(newRow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="authors-list">
  <tr>
    <td>author's first name</td>
    <td>author's last name</td>
  </tr>
  <tr>
    <td><input type="text" name="first_name" /></td>
    <td><input type="text" name="last_name" /></td>
  </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

Or yet you add <button class="remove" type="button">Remover</button> and in the Js add:

$(".remove").click(functions() {
    $(this).parents("tr").remove();
});

Answer 3

(function($) {

RemoveTableRow = function(handler) {
var tr = $(handler).closest('tr');

tr.fadeOut(400, function(){ 
  tr.remove(); 
}); 

return false;
  };	

var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' + counter + '"/>' +
    '</td><td><input type="text" name="last_name' +counter + '"/></td>' +
    '<td class="actions"><button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button></td></tr>');
    jQuery('table.authors-list').append(newRow);
});

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<table class="authors-list">
	  <tr><td>author's first name</td><td>author's last name</td></tr>
	  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
	</table>
	<a href="#" title="" class="add-author">Add Author</a>

in the last column we put the remove line button.

<td class="actions"><button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button></td>