Hinzufügen, Duplizieren und Entfernen von Elementen mit jQuery

Question

Also im Grunde habe ich versucht, einige jQuery zu schreiben, die eine Reihe von Eingaben auf Klick hinzufügen und duplizieren, funktioniert alles perfekt, außer für diese.

Illustration des Problems:

Wenn Sie auf die Schaltfläche Entfernen traf es verlässt die unter ‚Feld hinzufügen‘ -Button, ich würde es gerne wieder in die Zeile nach oben bewegen, wie oben gezeigt.

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

Ich habe eine die Antwort für dieses Gefühl etwas einfach, danke im voraus sein wird!

Answer 1

Ich habe ein wenig vereinfacht, hier ist ein Vorschlag, aber ich denke, die Struktur könnte besonders vereinfacht werden.

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

hinzugefügt einige CSS:

#add 
{ 
    float: left; 

} 

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

EDIT: unter richtige Linie zu vervielfältigen, modifizieren

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

Für:

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

Answer 2

Überprüfung dieser Code i Code bearbeiten das 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

Wahrscheinlich nicht die sauberste mögliche Lösung zu lösen, aber dies funktioniert die Taste, ohne Änderungen an den Rest des Codes zu bewegen:

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

Aktualisiert Geige:

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