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作为一个类，因为它在每一行中重复
使用事件委托，因为元素是动态创建的
您需要删除单击了删除按钮的行
您无法像在delete方法中设置输入值那样为函数调用设置值

应该是

$('#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;。

Jquery追加并删除元素

3 个答案: