使用Jquery多次添加和刪除div克隆

Question

有沒有更好的代碼的方法？此外，我想要將標籤的值更改爲「A1，A2」，「B1，B2」等等，但我不知道如何。

http://jsfiddle.net/qzGzv/

腳本：

//remove button 
$('.removeBtn').click(function() { 

    var counts = $(this).parent().parent().children().length-3; 
    if(counts < 4) { 
     $(this).parent().parent().find('.addBtn').show();   
    }  
    $(this).parent().remove(); 

}); 

//add button 
$('.addBtn').click(function() {     

    var counts = $(this).parent().children().length+1;    
    var content = $(this).prev(); 

    if (counts > 4) {      
     $(this).parent().find('.addBtn').hide(); 
    } 

    content.clone(true,true).insertAfter(content).find('.removeBtn').show().end() 
    .find('input').val(''); 

}); 

這裏的內容被克隆

的HTML

<div class="cointainer">  
    <div class="content">     
     <label for="itemFirst">A 1:</label> 
     <input type="text" name"itemFirst[]"> 
     <button class="removeBtn hide">Remove</button>  
    </div> 
    <button class="addBtn">Add Another</button>  
</div> 

<hr> 

<div class="cointainer">  
    <div class="content">     
     <label for="itemSecond">B 1:</label> 
     <input type="text" name"itemSecond[]"> 
     <button class="removeBtn hide">Remove</button>  
    </div> 
    <button class="addBtn">Add Another</button>  
</div> 

Answer 1

我的理解是要替換按鈕等的A1，A2內容

$('div.container') 
.html('<p>All new content. <em>You bet!</em></p>'); 

對於輸入文本區域，請使用val關鍵字。 http://api.jquery.com/val/

Answer 2

嘗試

<label for="itemFirst">A <span class="label-num">1</span>:</label> 

和

//remove button 
$('.removeBtn').click(function() { 
    var cointainer = $(this).closest('.cointainer'); 
    var counts = cointainer.children('.content').length; 

    counts--; 
    if(counts < 4) { 
     cointainer.children('.addBtn').show();   
     if (counts == 1) { 
      cointainer.find('.removeBtn').hide(); 
     } 
    } 
    $(this).parent().remove(); 

    cointainer.find('.label-num').text(function(idx){ 
     return 1 + idx 
    }) 
}); 

//add button 
$('.addBtn').click(function() { 
    var cointainer = $(this).closest('.cointainer'); 
    var counts = cointainer.children('.content').length; 
    var content = $(this).prev(); 

    counts++;  
    if (counts > 4) {      
     $(this).hide(); 
    } 
    content.clone(true,true).insertAfter(content).find('input').val('').end().find('.label-num').text(counts); 

    cointainer.find('.removeBtn').show(); 
}); 

演示：。Fiddle