Adding, copying, and deleting elements using jQuery

Question

Basically, I am trying to write some jQuery that will add and duplicate a line of inputs per click, everything works fine except for this.

Problem Illustration:

When you click the "Delete" button, it will leave the "Add Field" button at the bottom, I would like it to return to the line as shown above.

Html:

<form action="javascript:void(0);" method="POST" autocomplete="off"> <input type="submit" value="Submit"> <br> <br> <div class="bigjane"> <button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br> </div> </form> 

JQuery

 jQuery(document).ready(function () { 'use strict'; var input = 1, button = ("<button class='add'>Add Field</button>"); $('.add').click(function () { $(this).clone(true).appendTo('form'); $(this).remove(); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">'); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">'); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>'); input = input + 1; }); $('form').on('click', '.remove', function () { $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).next('br').remove(); $(this).remove(); input = input - 1; }); $('form').on('click', '.duplicate', function () { $('.add').attr('id', 'add'); $('#add').removeClass().appendTo('form'); $(this).prev().prev().prev('input').clone().appendTo('form'); $(this).prev().prev('input').clone().appendTo('form'); $(this).prev('input').clone().appendTo('form'); $('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>'); input = input + 1; }); }); 

JSFiddle example

I have a feeling that the answer to this question will be somewhat simple, thanks in advance!

Answer 1

I have simplified a little, here is the proposal, but I think that the structure could be especially simplified even more.

 <form action="javascript:void(0);" method="POST" autocomplete="off"> <input type="submit" value="Submit"> <br> <br> <div class="bigjane"><button id="add">Add Field</button> <div class='input_line'> <input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br></div> </div> </form> jQuery(document).ready(function () { 'use strict'; var input = 1, button = ("<button class='add'>Add Field</button>"); var blank_line = $('.input_line').clone(); $('#add').click(function () { $('form').append(blank_line.clone()) $('.input_line').last().before($(this)); }); $('form').on('click', '.remove', function () { $(this).parent().remove(); $('.input_line').last().before($('#add')); input = input - 1; }); $('form').on('click', '.duplicate', function () { $('form').append($(this).parent().clone()); $('.input_line').last().before($('#add')); input = input + 1; }); }); 

some css added:

 #add { float: left; } 

See jsfiddle: http://jsfiddle.net/tor9wvev/

EDIT: to duplicate under the correct line, change

 $('form').append($(this).parent().clone()); 

For:

 $(this).parent().after($(this).parent().clone()); 

Answer 2

check this code, i am editing your code to solve the problem.

 jQuery(document).ready(function () { 'use strict'; var input = 1, button = ("<button class='add'>Add Field</button>"); $('.model').on('click', '.add', function () { $(this).clone(true).appendTo('form'); $(this).remove(); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">'); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">'); $('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>'); input = input + 1; }); $('form').on('click', '.remove', function () { $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).prev('input').remove(); $(this).next('br').remove(); $(this).prev().prev().prev().prev().prev().prev().prev().before('<button class="add">Add Field</button>') $(this).prev().remove(); $(this).remove(); input = input - 1; }); $('form').on('click', '.duplicate', function () { $('.add').attr('id', 'add'); $('#add').removeClass().appendTo('form'); $(this).prev().prev().prev('input').clone().appendTo('form'); $(this).prev().prev('input').clone().appendTo('form'); $(this).prev('input').clone().appendTo('form'); $('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>'); input = input + 1; }); }); </script> <div class="model"> <form action="javascript:void(0);" method="POST" autocomplete="off"> <input type="submit" value="Submit"> <br> <br> <div class="bigjane"> <button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br> </div> </form> </div> 

Answer 3

This may not be the best solution, but it works to move the button unchanged to the rest of the code:

 $('form').on('click', '.remove', function () { /* ... */ $(this).closest('form') .find('input[type="text"]:last') .prev().prev().before($('.add')); 

Updated script:

http://jsfiddle.net/mah0nqz0/1/