Adding, duplicating and removing elements with jQuery

Question

So basically, I have been trying to writing some jQuery that will add and duplicate a row of inputs on click, everything is working perfectly except for this.

Illustration of problem:

enter image description here

When you hit the remove button it leaves the 'Add Field' button beneath, I would like it to move back up into the row 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 the answer for this is going to be somewhat simple, thanks in advance!

Julien Grégoire · Accepted Answer · 2015-05-10 21:11:27Z

2

I simplified a bit, here's a suggestion, but I think the structure especially could be 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;
    });
});

added some css:

#add
{
    float: left;

}

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

EDIT: to duplicate beneath correct line, modify

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

For:

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

edited May 10, 2015 at 21:11

answered May 10, 2015 at 20:37

Julien Grégoire

17.2k4 gold badges34 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jordan Over a year ago

Hey Julien, this works great and I appreciate you simplifying the jQuery. I thought I had made it over complex for what it needed to be. Also when you hit the 'duplicate' button, how could I make it go directly beneath the row you're duplicating instead of putting it at the very bottom?

Jordan Over a year ago

I have been messing around with the jQuery you edited for me and trying out different ways to align the inputs, is there a simple way of aligning the inputs as illustrated here? - screenshot

Julien Grégoire Over a year ago

Add to css .input_line{ margin-left: 70px;}

Jordan Over a year ago

That was more simple than I thought, why doesn't this create a gap in-between the 'add field' button and the input_line div?

Julien Grégoire Over a year ago

yes, that's what I thought too. Probably because of the float of the add field button that doesn't interfere with the rest. But I'm not sure about this one, I didn't think it would work...

Osama Jetawe · Accepted Answer · 2015-05-10 20:37:29Z

check this code i edit 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>

CupawnTae · Accepted Answer · 2015-05-10 20:38:51Z

0

Probably not the neatest possible solution, but this works to move the button without changes to the rest of the code:

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

Updated fiddle:

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

answered May 10, 2015 at 20:38

CupawnTae

14.7k3 gold badges31 silver badges62 bronze badges

Collectives™ on Stack Overflow

Adding, duplicating and removing elements with jQuery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related