0

だから、これを持っていますhttp://jsfiddle.net/mDfQT/15/

<ul id="variants" data-size="0">
    <input type="text" id="some_name" class="some_name" placeholder="category name">
</ul>
    <a href="#" class="add_options" data-id="70281696560900">Add more </a>
Number of rows: <span id="count">0</span>

そのため、フィドルに表示される JavaScript は、追加リンクがクリックされるとテキスト ボックスに li を追加し、削除リンクがクリックされるとそれを削除します。
削除リンクをクリックすると、それがulの最後のliであるかどうかを確認し、最後の/唯一のliである場合は、id some_nameの入力も削除します。
これについてどう思いますか?ありがとう。

4

1 に答える 1

4
$('.add_options').on('click', function () {
    if ( $('#variants > li').length < 2 && (! $('#some_name').closest('li').is(':visible') )) {
        $('#some_name').closest('li').show();
    }else{
        var li  = $('<li />',    {'class':'some_id'}),
            inp = $('<input />', {type:'text', id:'prop_name', 'class':'prop_name', placeholder:'Property name'}),
            anc = $('<a />',     {href:'#', 'class':'remover', text: 'Remove'});

        $('#variants').append(li.append(inp, anc));

        anc.on('click', function() {
            if ($('#variants > li').length < 3) $('#some_name').closest('li').hide();
            $(this).closest('.some_id').remove();
        });
    }
});

フィドル

于 2013-06-23T11:38:47.753 に答える