jQuery

Question

ile elemanlar eklemek, kopyalamak ve kaldırmak Temel olarak, tıklamadaki bir satır girdi ekleyip çoğaltacak bir jQuery yazmayı deniyorum, bunun dışında her şey mükemmel çalışıyor. Sorunun

İllüstrasyon: Eğer altındaki düğmeye 'Field ekle', yukarıda gösterildiği gibi satıra kadar geri hareket içinde olmasını bırakır kaldır düğmesine basın

.

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

Ben bunun için cevap biraz basit olacak duygu var, şimdiden teşekkürler!

Answer 1

Birazcık basitleştirdim, işte bir öneri var ama bence yapı özellikle daha da basitleştirilebilir.

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

bazı css ekledi:

#add 
{ 
    float: left; 

} 

bakınız jsfiddle: http://jsfiddle.net/tor9wvev/

DÜZENLEME: değiştirmek, doğru çizgi altındaki çoğaltmak

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

için:

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

Answer 2

çek senin kodunu düzenlemek bu kod sorunu Muhtemelen

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

değil neatest olası çözüm çözmek için, ancak bu kodun geri kalanına değişiklik olmadan düğmeye taşımak için çalışır:

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

Güncelleme keman:

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