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

因此，基本上，我一直在尝试编写一些jQuery，它将在单击时添加和复制一行输入，除此之外，一切都运行得很好

问题说明：

当你点击删除按钮时，它会留下下面的“添加字段”按钮，我希望它能像上面所示那样向上移动到行中

Html:

添加字段

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

jQuery（文档）.ready（函数（）{
"严格使用",；
变量输入=1，
按钮=（“添加字段”）；
$（'.add'）。单击（函数（）{
$（this.clone（true）.appendTo（'form'）；
$（this.remove（）；
$（'form'）。追加（''）；
$（'form'）。追加（''）；
$（'form'）。追加（'br>'）；
输入=输入+1；
});
$（'form'）。在（'click'，'remove'，函数（）上{
$（this.prev（'input'）.remove（）；
$（this.prev（'input'）.remove（）；
$（this.prev（'input'）.remove（）；
$（this.prev（'input'）.remove（）；
$（this.next（'br'）.remove（）；
$（this.remove（）；
输入=输入-1；
});
$（'form'）。在（'click'，'duplicate'，函数（）{
$（'.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'）。追加（'br>'）；
输入=输入+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;
    });
});

参见JSFIDLE：

编辑： 要在正确的行下复制，请修改

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

用于：

---

检查此代码我编辑您的代码以解决此问题

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>

jQuery（文档）.ready（函数（）{
"严格使用",；
变量输入=1，
按钮=（“添加字段”）；
$（'.model'）。在（'单击'，'.add'，函数（）{
$（this.clone（true）.appendTo（'form'）；
$（this.remove（）；
$（'form'）。追加（''）；
$（'form'）。追加（''）；
$（'form'）。追加（'br>'）；
输入=输入+1；
});
$（'form'）。在（'click'，'remove'，函数（）上{
$（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（）.prev（）.before（'添加字段'）
$（this.prev（）.remove（）；
$（this.remove（）；
输入=输入-1；
});
$（'form'）。在（'click'，'duplicate'，函数（）{
$（'.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'）。追加（'br>'）；
输入=输入+1；
});
});




添加字段

可能不是最简单的解决方案，但这可以在不更改代码其余部分的情况下移动按钮：

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

更新小提琴：

---

嘿，Julien，这非常有效，我感谢您简化jQuery。我想我已经把它弄得太复杂了。另外，当您点击“复制”按钮时，我如何使它直接位于您正在复制的行下方，而不是放在最底部？我一直在摆弄您为我编辑的jQuery，并尝试不同的方法来对齐输入，有没有一种简单的方法来对齐输入，如图所示添加到css.input_line{margin left:70px；}这比我想象的要简单，为什么这不在“Add field”按钮和input_line div之间创建一个间隙呢？是的，我也是这么想的。可能是因为addfield按钮的浮动不影响其余部分。但我不确定这一个，我不认为它会工作。。。

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

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>

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