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”按钮一个类，并在选择器中使用它。

以上是working example以上内容。

如果您不使用jQuery 1.7+，则可以改为使用delegate方法：

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

Answer 2

为每一行分配一个ID，然后添加一个按钮，在单击时删除具有该ID的行。

<script type="text/javascript">
var rowIndex=0;
$(function () {
     $("#AddLine").click(function () {
        rowIndex++;
        var row = "<tr id='row_"+rowIndex+"'><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button onclick="removeRow('"+rowIndex+"')">X</button></td></tr>";
        $("#table").append(row);
    });
});
function removeRow(index){
    $('#row_'+rowIndex).remove();
}
</script>

Answer 3

你可以使用jquery的.closest("tr").remove();

您可以尝试删除最后一行jquery或任何特定原始表格，如下所示

以下将仅删除最后一个原始

$('#table tr:last').remove();

以下将只删除第二个原始

$('#table tr:eq(1)').remove();

Answer 4

您必须将事件点击添加到您正在创建的X按钮，其ID与要识别要删除的行的行相同。

类似的东西：

$(function () {
 $("#AddLine").click(function () {
    var row = "<tr id="row_33"><td><input type=text /></td><td><input type=text /></td><td><input  type=text /></td><td><button id="button_33">X</button></td></tr>";

    $("#table").append(row);

    $("#button_33").click(function () {
          $("#row_33").remove();
    });
});

}）;

您还必须添加一个分配此ID的过程...

Answer 5

您必须使用Live事件而不是单击。

您可以将此添加到生成的html中

<a class="remove" href="#">X</a>

然后你可以做

$("remove").live("click", function(){
  "find your row. Could be $(this).parents("tr") which searchs your parent until it hits   tr and then remove it by using .remove()"
  return false;
});

生成东西时会使用Live（），因此您需要选择那个。希望它有所帮助！

jQuery动态追加和删除

5 个答案: