jquery - 入力フィールドの追加と削除

Question

ユーザーが addAgent ボタンをクリックしたときに、4 つの入力フィールドを追加する必要があります。また、ユーザーがそれらのいずれかから削除できるようにします。ユーザーが 4 つの入力フィールドを追加した場合、追加ボタンを無効にしたい。ユーザーがこれらの 4 つの入力フィールドの 1 つを削除した場合、ユーザーが削除または追加した入力の数に応じて、追加ボタンを有効にして、さらに 1 つまたは 2 つ追加します。ただし、最大 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

おそらくこれはあなたが探しているものですか？次のように 4 つの入力を作成できます。

 <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