javascript - 反转 Javascript 函数

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() 与 return false）

另外，我在:last-child这里使用而不是:last 为了获得更好的性能：

因为:last是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:last不能利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在使用:lastto 选择元素时获得最佳性能，首先使用纯 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();
    });
});

在这里你可以找到一些信息为什么你不应该使用return false;除非你知道你在做什么

你可以让它更快一点

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