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);
    });
});

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

- Timothy

---

嗯，我在这里看不到问题：http://jsfiddle.net/FJfwX/。你使用的jQuery版本是什么？`on`是在1.7中引入的。 - Andrew Whitaker

这太奇怪了...注释的代码看起来没问题。你使用的是哪个版本的jQuery？你记得同时删除注释的开头/*和结尾*/吗？ - J. Bruni

你的控制台有没有出现任何错误？ - aziz punjani

@AndrewWhitaker 嗯，我知道，我也尝试了同样的事情，这就是为什么我在这里发帖的原因。我很困惑，为什么在fiddle中可以工作，但在实际应用中却不行。 - Richard

在Chrome/Safari中有开发者工具，在IE中也有开发者工具，在Firefox中有Firebug，但我相信新版本已经内置了开发者工具。你正在使用哪个浏览器？ - aziz punjani

Answer 1

从你的代码中复制 Ctrl+CCtrl+V：

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

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

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

我建议您随手准备一份Notepad++剪贴板代码，它默认显示这些不可见字符为?：

您还可以取消代码的注释并在JSHint中测试它，它将告诉您哪一行存在无效字符。

- Fabrício Matté