Создание и удаление динамического текстового поля с помощью jquery/javascript

Question

В настоящее время приведенный ниже фрагмент кода дает мне текстовое поле и кнопку «добавить». При нажатии кнопки «Добавить» новое текстовое поле создается под первым текстовым полем. нажатие «добавить» снова добавляет еще одно текстовое поле и так далее. Но в настоящее время в новом текстовом поле нет кнопки «добавить». Я хочу кнопку «добавить» для каждого текстового поля. Я также хочу кнопку удаления для каждого текстового поля, и нажатие на нее приведет к удалению этого конкретного текстового поля в этой строке. Кроме того, я хочу проверить, что более 10 текстовых полей не будут разрешены при нажатии кнопки «Добавить».

Could aNY of you please help !! Coding in both jquery and javascript would be appreciable. 


HTML CODE : 

<div id="inputs"> 
Name : <input type='text' name='name'> 

<button onclick="getinput()">Add</button> 
</div> 


Javascript code : 


function getinput() 
{ 
var name="<br> <input type='text' name='name'>"; 

$("#inputs").append(name); 
} 

Answer 1

вы могли бы сделать что-то вроде этого: http://jsfiddle.net/yq670z0d/1/

<div id="inputs"> 
    <div class="input"> 
    Name : <input type='text' name='name'/> 
    <button class="addbox">Add</button> 
    </div> 
</div> 


$("#inputs").on('click','.addbox',function(){ 
    if($('.input').length < 10){ 
     $(this).parent().clone().appendTo('#inputs'); 
    } 
}); 

Только JQuery, но довольно коротким. идея состоит в том, чтобы скопировать div с вашим входом и кнопкой, а затем добавить его в свои входы div.

для вашей кнопки удаления, вам просто нужно добавить кнопку с классом delete, а в другом прослушивателе кликов вызвать функцию jQuery remove() для указанного div. например:

<div id="inputs"> 
    <div class="input"> 
    Name : <input type='text' name='name'/> 
    <button class="removebox">Remove</button> 
    </div> 
</div> 

$("#inputs").on('click','.deletebox',function(){ 
    $(this).parent().remove(); 
});