jQuery的追加和刪除元素

Question

我有一個函數將元素添加到一個表，該表是：

$('#mais').on('click', function(){ 
var next = $('#lista tbody').children('tr').length + 1; 
$(':input[name="qtd_itens"]').val(next); 
$('#lista tbody').append('<tr>' + 
     '<td><input type="text" name="qtd' + next + '" size="5" /></td>' + 
     '<td><input type="text" name="unidade' + next + '" size="6" /></td>' + 
     '<td><input type="text" name="mercadoria' + next + '" size="20" /></td>' + 
     '<td><input type="text" name="codigo' + next + '" size="15" /></td>' + 
     '<td><input type="text" name="preco' + next + '" size="10" class="money" /></td>' + 
     '<td><input type="text" name="total' + next + '" size="10" readonly /></td>' + 
     '<th><a href="#" id="menos"><img src="imgs/delete.png" height="20px" width="20px"></a></th>' + 
     '</tr>');  
$('.money').maskMoney({thousands:'.', decimal:','}); 
return false; 
}); 

的我試着做了刪除功能，但我也不能。

我曾嘗試：

$('#menos').on('click', function(){ 
$('#lista tbody').children('tr:last').remove(); 
$(':input[name="qtd_itens"]').val() -= 1; 
}); 

但它不工作。有人可以幫忙嗎？

Answer 1

您需要

• 使用menos爲一類，因爲它是每一行中重複
• 使用事件委派，因爲元素是動態創建
• 你需要刪除其刪除按鈕是排點擊
• 你不能設置一個值到一個函數調用，就像你在刪除方法中設置輸入值一樣

它應該是

$('#mais').on('click', function() { 
    var next = $('#lista tbody').children('tr').length + 1; 
    $(':input[name="qtd_itens"]').val(next); 
    $('#lista tbody').append('<tr>' + 
     '<td><input type="text" name="qtd' + next + '" size="5" /></td>' + 
     '<td><input type="text" name="unidade' + next + '" size="6" /></td>' + 
     '<td><input type="text" name="mercadoria' + next + '" size="20" /></td>' + 
     '<td><input type="text" name="codigo' + next + '" size="15" /></td>' + 
     '<td><input type="text" name="preco' + next + '" size="10" class="money" /></td>' + 
     '<td><input type="text" name="total' + next + '" size="10" readonly /></td>' + 
     '<th><a href="#" class="menos"><img src="imgs/delete.png" height="20px" width="20px"></a></th>' + 
     '</tr>'); 
    return false; 
}); 
$('#lista').on('click', '.menos', function() { 
    $(this).closest('tr').remove(); 
    $(':input[name="qtd_itens"]').val(function (i, val) { 
     val = +val; 
     return val > 1 ? val - 1 : 0; 
    }); 
}); 

演示：Fiddle

Answer 2

相反ID 'menos' 的，你需要把它作爲應用類的名稱一樣，

<th><a href="#" class="menos"><img src="imgs/delete.png" height="20px" width="20px"></a></th> 

然後嘗試，

$(document).on('click','.menos', function(){ 
$('#lista tbody').children('tr:last').remove(); 
$(':input[name="qtd_itens"]').val() -= 1; 
}); 

Answer 3

這裏的工作JSFiddle。唯一的主要問題是你做減法的方式$(':input[name="qtd_itens"]').val() -= 1;。