JQuery删除动态表上的行

Question

我正在创建一个注册页面，用户可以注册其他几个人。我已经做到这一点，表格只显示用户是否选择了某个选项。我还添加了添加按钮，可以很好地添加行。问题是当我为删除按钮添加功能时，一切都会中断。这是我的HTML：

<div id="add_table" style="display:none;" >
    <button type="button" id="AddLine">Add Line</button>
    <table border="1px" id="table">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Phone</td>
            <td>Email</td>
            <td>Ethnicity</td>
        </tr>
        <tr>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><button type="button">delete</button></td>
        </tr>
    </table>​
</div>

这是我的jquery代码：

$(document).ready(function(e) { 
    $("input[name= 'Reg_num_r']").change( function () {
        if($(this).val()==1) {
            $("#add_table").hide();
        } else {
            $("#add_table").show();
        }
    });

    /*$("#table").on("click", "button", function() {
       $(this).closest("tr").remove(); 
    });​*/

    $("#AddLine").click(function () {
        var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td>                   <input type=text /></td><td><input type=text /></td><td><button type=button>delete</button></td></tr>";
        $("#table").append(row);
    });
});

现在当我取消注释上面注释的代码时，一切都停止了。即使用户选择了正确的选项，该表也不会显示。我该如何修复它以便正确执行删除行操作？

Answer 1

从您的代码中

Ctrl + C Ctrl + V ：

/*$("#table").on("click", "button", function() {
    $(this).closest("tr").remove(); 
});​*/

在最后一个分号后面有一个0宽度的空格，单击编辑并使用箭头键查看它。它是JavaScript中的非法字符并生成语法错误。

从jsFiddle和其他地方复制代码时，这是一个常见的问题。

我建议您随身携带Notepad++副本来查看copypasta代码，默认情况下会将这些不可见字符显示为?：

您也可以取消注释代码并在JSHint中对其进行测试，它会告诉您哪一行有无效字符。