jquery - 使用 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

尝试

<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();
});

演示：小提琴

Answer 2

我的理解是你想替换按钮等的A1、A2内容。

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

对于输入，文本区域，使用val关键字。 http://api.jquery.com/val/