jQuery动态追加和删除

Question

我有这段代码.我想从创建的每一行中删除使用"Line Add"按钮创建的行和"X"按钮.有任何想法吗？？谢谢!

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

<button id="AddLine">Add Line</button>
    <table border="1px" id="table">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Email</td>
        </tr>
        <tr>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
        </tr>
    </table>

Answer 1

如果您使用的是jQuery 1.7+,那么您可以使用以下on方法:

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

请注意,这假设button您表中只有类型的元素用于删除行.如果不是这种情况,您可能希望给"X"按钮一个类并在选择器中使用它.

这是上面的一个工作示例.

如果您不使用jQuery 1.7+,则可以使用该delegate方法:

$("#table").delegate("button", "click", function() {
   $(this).closest("tr").remove(); 
});