jQuery字段的最大值和表单中的min

I'm little bit new with jQuery so I have some questions:

I have a form with 2 links where you can add 1 field and remove 1 field.

  1. But the problem is I want to stop at 10 fields, so you max can add 10 fields?

  2. The second problem is how can it stop at minimum 1 field, right now it's deleting every field to 0 if you click remove all the time?

  3. Last question how can I do, so when I press submit button, I want to remember how many fields you were on before you pressed submit?

I hope somebody can help me, it's something i need really quick :-D

jQuery:

var i = $('input').size() + 1;
max = 10;

$('#add').click(function() {
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
});

$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    i--; 
}
});

HTML:

<a href="#" id="add">Add +1</a> | <a href="#" id="remove">Remove -1</a>
<form method="post">
    <div class="inputs">
        <div>
            <input type="text" name="dynamic[]" class="field" value="Some text..."/></div>
        </div>
    <input name="submit" type="submit" class="submit" value="Submit"/>
</form>

You can use $('.field').length to get the amount of elements with the class 'field'(A more specific class name helps here). So if you use that class exclusively for the inputs you can use it as a solid count.

if ($('.field').length <= 10) {
    //Add a new one
} else {
    //Already 10
}
$('#add').click(function() {
   if ($('.field').length <= 10) {
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
 }else
   alert("10 Completed");
});

$('#remove').click(function() {
  if ($('.field').length < 1) {
    $('.field:last').remove();
    i--; 
   }else
     alert("only one");
});

As the other two asnwers mine is same. Setup a fiddle:

http://fiddle.jshell.net/Aq7rS/

var i = $('input').size() + 1;
max = 10;

$('#add').click(function() {

if($('.field').length < 11){
    $('<div><input type="text" class="field" name="dynamic[]" value="Some text..." /></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    }

});

$('#remove').click(function() {
    if($('.field').length > 1){
        if(i > 1) {
            $('.field:last').remove();
            i--; 
        }

    }
});