javascript - 使用 jQuery 添加、复制和删除元素

Question

所以基本上，我一直在尝试编写一些 jQuery，它会在点击时添加和复制一行输入，除此之外一切正常。

问题说明:

当您点击删除按钮时，它会在下方留下“添加字段”按钮，我希望它能如上所示移回行中。

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

我觉得这个问题的答案会有些简单，提前致谢!

Answer 1

我简化了一点，这是一个建议，但我认为尤其是结构可以进一步简化。

<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;
    });
});

添加了一些CSS:

#add
{
    float: left;

}

参见 jsfiddle:http://jsfiddle.net/tor9wvev/

编辑:在正确的行下复制，修改

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

对于:

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