Question

我有一个克隆最后一个表行的脚本，并通过单击[+]图标将其插入到表格底部。我想要做的是通过单击[ - ]图标来删除最后一个表行。这是否可能，如果是这样，有人能指出我正确的方向吗？

<script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
        $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
        $('#mytable tbody>tr:last #itemid').val('');
        $('#mytable tbody>tr:last #itemdesc').val('');
        return false;
    });
});
</script>

Answer 1

您正在寻找.remove()方法：

$("#remove").click(function(e) {
    e.preventDefault();
    $('#mytable > tbody > tr:last-child').remove();
});

e.preventDefault()是为了防止元素的默认操作（无论是按钮还是链接）。我假设存在默认操作，因为您在原始添加代码中使用了return false;。

（旁注：event.preventDefault() vs. return false）

另外，我在这里使用的是:last-child，而不是:last for better performance：

由于:last是jQuery扩展而不是CSS规范的一部分，因此使用:last的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。要在使用:last选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":last")。

由于纯CSS选择器适用于这种情况（假设您有一个格式良好的表），因此不需要.filter(':last')。在克隆最后一行时，您还应该能够在#add代码中执行此操作。

Answer 2

是的，jQuery有一个名为.remove()的函数：

$("#remove").click(function(e) {
        $('#mytable tbody>tr:last').remove();
        e.preventDefault(); // dont use return false, use preventDefault();
    });
});

Here you can find some info why you should not user return false; unless you know what you are doing

你可以让它更快一点

$("#remove").click(function(e) {
        $('#mytable tbody tr').filter(':last').remove();
        e.preventDefault();
    });
});

Answer 3

使用jQuery .remove()：

$("#remove").click(function(e) {
    e.preventDefault();
    $('#mytable tbody>tr:last').remove();
});

颠倒Javascript函数

3 个答案: