jQuery的添加/刪除項目和復位計數器

Question

我有下面的代碼：

var counter = $("#myTable tbody").children().length; 

刪除功能：

$(document).on('click', 'a.remove', function() { 
    if(counter == 1) { 
     return false; 
    } 

    $(this).closest('tr').fadeOut().remove(); 
    counter--; 
}); 

添加功能：

$('#add').on('click', function() { 
    if (counter > 10) { 
     return false; 
    } 
    counter++; 
    var newTr = $('<tr data-id="' + counter + '"></tr>'); 

    newTr.html(
     '<td><i class="icon reorder"></i></td>\ 
     <td><small>' + counter + '.</span></td>\ 
     <td> <input type = "text" name = "price[]" data-id = "' + counter + '"></td>\ 
     <td><a class="remove"><i class="icon delete"></i></a></td>\ 
     '); 
    }); 

當移除項目點擊，我想重置計數器，所以<small></small>之間的值從1開始依次恢復。

Answer 1

好像你需要，之後再次用新值

$(document).on('click', 'a.remove', function() { 
    if(counter == 1) { 
     return false; 
    } 

    $(this).closest('tr').fadeOut().remove(); 

    counter = 0; 

    $("#myTable tbody").children().each(function(){ 
     counter++; 
     $(this) 
      .find("small").text(counter) 
      .end() 
      .find("input").attr("data-id", counter); 
    }); 
});