ユーザーが複数行のフィールドを追加できるようにしていますが、フィールドの最初の行に削除リンクを含めたくないので、すべてのフィールドを削除することはできません。
また、フィールドを 3 行だけに制限するにはどうすればよいですか?
ユーザーが複数行のフィールドを追加できるようにしていますが、フィールドの最初の行に削除リンクを含めたくないので、すべてのフィールドを削除することはできません。
また、フィールドを 3 行だけに制限するにはどうすればよいですか?
このフィドルを試してください:フィドル
最初の行の削除を非表示にする最初の部分では、ページの読み込み時に次のように呼び出しました。
$(".removeoutcome").hide();
次に、3つ以上追加したり、最後のものを削除したりできないようにするために、click
メソッドに長さチェックを追加しました。次を参照してください。
$('.addoutcome').live('click', function() {
if ($(".outcomegroup").length < 3) {
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
renumber();
}
});
$('.removeoutcome').live('click', function() {
if ($(".outcomegroup").length > 1) {
$(this).closest('.outcomegroup').remove();
renumber()
}
});
また、補足として、live
現在は非推奨になっているため、jQuery 1.7 を使用している場合はこれらのメソッドを に変更するon
か、1.7 より前の場合は を使用してdelegate
ください。
次のコードを使用して、最初の要素の del を非表示にして、さらに 3 つのセットのみを追加するように制限できます。
var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
count--;
if(count < 0 )return;
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
});
ここに作業フィドルがありますhttp://jsfiddle.net/joycse06/uW9NQ/
更新: http: //jsfiddle.net/NzbRQ/5/
まず、溝.live
。section
より具体的なセレクターを提供するためにを追加しましたbody
が、元のDOMで使用できるより良いものがおそらくあります。
単純なロジックで最後の行を削除しないでください。将来の「del」リンクを表示するためのロジックは、実際にはすでに存在していました。「del」を表示しないだけで十分なので、最終行の削除ロジックはまったく必要ありませんが、私は徹底的に取り組んでいました。
なぜ誰もこの行に細心の注意を払っていないのか、私にはわかりません:
.find('.minus').show();
彼は間違いなく要素を非表示にしていましたdel
。つまり、適切な CSS ルールを追加するだけで済みます。
.minus { display: none; }
それだけです。最初の要素にはdel
リンクが表示されず、他の要素にはリンクが表示されます。
単純に3要素に制限。
$("[parent element]").on('click', '.addoutcome', function() {
if($('.addoutcome').length > 2) return;
...
});
より良いセレクター[parent selector]
が必要であり、レイアウトに完全に依存します。基本的に、これらすべての要素をラップする要素であり、それらすべての親要素です。