Decrease the JAVASCRIPT forms

Question

Decrease the JAVASCRIPT forms

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

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

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><tableclass="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>

php javascript html jquery

asked by anonymous 29.01.2018 / 13:42

3 answers

0

Use another column with a button and in the onClick event 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><tableclass="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 you add <button class="remove" type="button">Remover</button> and Js add:

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

29.01.2018 / 13:48

0

(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><tableclass="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 button to remove the line.

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

29.01.2018 / 14:19

Error Array to String Conversion Proper way to manipulate the data received from the server

score 1 · Accepted Answer

From an id for 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><tableclass="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>