Добавление и удаление полей ввода

Question

У меня есть требование добавить 4 поля ввода, когда пользователь нажимает кнопку addAgent. Я также разрешаю пользователю удалять из одного из них. Если пользователь добавляет 4 поля ввода, я хочу отключить кнопку добавления. Если пользователь удаляет одно из этих 4 полей ввода, включите кнопку добавления для добавления еще одного или добавьте еще два, в зависимости от того, сколько пользователей было удалено или добавлено. Но макс всего четыре. Я хотел бы сделать это с помощью jQuery, любой справки или образца, который я могу получить? Благодаря!

Answer 1

Здесь работает jsfiddle [DEMO]

<div id="add">Add</div> 
    <div id="container"></div> 

$('#add').bind('click', function() { 
    if($('#container').find('input').length < 4) { 
     $('#container').append('<div><input type="text"><span class="remove">remove</span></div>'); 
    } 
}) 

$('body').on('click', '.remove', function() { 
    if($('#container').find('input').length > 0) { 
     $(this).parent().remove(); 
    } 
}) 

Answer 2

Возможно, вы это и нашли? Вы можете создать четыре входа, как это:

<div class='control'> 
     <input type='text' value='' /> 
     <a href='#' class='remove'>Remove</a> 
    </div> 
    <div class='control'> 
     <input type='text' value='' /> 
     <a href='#' class='remove'>Remove</a> 
    </div> 
    <div class='control'> 
     <input type='text' value='' /> 
     <a href='#' class='remove'>Remove</a> 
    </div><div class='control'> 
     <input type='text' value='' /> 
     <a href='#' class='remove'>Remove</a> 
    </div> 

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

Как это: http://jsfiddle.net/kSH7M/1