Форма клонирования jQuery с пустым вводом

Question

Существует форма, которую я хотел бы клонировать эту форму каждый раз при нажатии кнопки ADD. в этом случае форма добавляется с предыдущими значениями для ввода. Я хочу, чтобы каждая форма работала отдельно. Есть ли способ добавить с пустыми значениями для ввода?

Вот мой сниппет:

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi").eq(0).clone().show().insertAfter(".formi:last"); 
 
    
 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
     $(this).closest('.formi').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" value="Sarah" /> 
 
    <select name="cars"> 
 
     <option value="one">one</option> 
 
     <option value="two">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

Answer 1

Да, просто снимите их в клонированной копии (см *** строку):

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi") 
 
     .eq(0) 
 
     .clone() 
 
     .find("input").val("").end() // *** 
 
     .show() 
 
     .insertAfter(".formi:last"); 
 
    
 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
     $(this).closest('.formi').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" value="Sarah" /> 
 
    <select name="cars"> 
 
     <option value="one">one</option> 
 
     <option value="two">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

Этот конкретный пример использует find, чтобы найти input, val, чтобы очистить его значение, а затем end для возврата к исходному набору клонированных элементов, так что show и insertAfter выполняются на этом множестве (вместо ввода (ов)).

Answer 2

Вы должны сначала клонировать form, а затем сбросить значения элементов следующим образом. В вашем случае input.

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 

 
    var form = $(".formi").eq(0).clone(); 
 
    form.find("input[type=text]").val(""); 
 
    form.show().insertAfter(".formi:last"); 
 

 

 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
    $(this).closest('.formi').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" value="Sarah" /> 
 
    <select name="cars"> 
 
     <option value="one">one</option> 
 
     <option value="two">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

Answer 3

Вы можете выбрать последнюю форму после того, как клон затем очистить значение дочерних входов, как:

$(".formi:last input").val(''); 

$(document).ready(function() { 
 
    $(".Add").click(function() { 
 
    $(".formi").eq(0).clone().show().insertAfter(".formi:last"); 
 
    $(".formi:last input").val(''); 
 
    }); 
 
    $('.all').on('click', ".cancel", function() { 
 
    $(this).closest('.formi').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<span class="Add">Add+</span> 
 
<div class="all"> 
 
    <form class="formi"> 
 
    <input type="text" placeholder="name" value="Sarah" /> 
 
    <select name="cars"> 
 
     <option value="one">one</option> 
 
     <option value="two">two</option> 
 
    </select> 
 
    <button type="submit">ok</button> 
 
    <span class="cancel">Cancel</span> 
 
    </form> 
 
</div>

Answer 4

I реорганизованным некоторые из y наши вещи, потому что я должен был сделать это по-другому, чтобы заставить его работать так, как я этого хотел, но вот он.

Вот JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">   </script> 
    <span class="Add">Add+</span> 
    <div class="all"> 
    <div class="formi"> 
    <input type="text" placeholder="name" value="Sarah" /> 
    <select name="cars"> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    </select> 
    <button class="add">ok</button> 
    <span class="cancel">Cancel</span> 
    </div> 
</div> 



function addClickListener(){ 
    arr = $(".add") 
    $(arr[arr.length - 1]).click(function(ev) { 
     var clone = ev.currentTarget.parentElement.cloneNode(true); 
     $('.all').append(clone); 
     addClickListener(); 

    }); 
    cancArr = $('.cancel'); 
    $(cancArr[cancArr.length - 1]) 
    .on('click', function() { 
     $(this).parent().remove(); 
     }); 
    } 

    addClickListener();