如何使用javascript正确删除表行?

时间:2016-12-06 18:46:08

标签: javascript html

我正在使用以下HTML。

<tr id="1">
<td></td>
<td><input class="form-control" value="Extra Data"></td>
<td><a href="#save" class="addsub_MS btn btn-primary btn-lg" id="1">Save</a></td>
<td><a href="#delete" class="delete_MS btn btn-primary btn-lg" id="1">Delete</a></td>
<td></td>
</tr>

我正在尝试使用以下javascript删除行

$("a[href=#delete]").click(function() {
var id;
if ($(this).hasClass('delete_MS')) {
    var id = $(this).attr("id");
    }
    var data = {
        id: id
    };
    $.ajax({
        type: "POST",
        url: "deleteparent.php",
        data: data
    }).done(function() {
        $(this).closest('tr').remove();
    });
});

这不会删除该行。

有什么建议吗?

3 个答案:

答案 0 :(得分:3)

您应该将this变量保存在其他变量中,否则done(..)函数中的引用与您单击的原始a的引用不同:

$("a.delete_MS").click(function() {
    var id;
    var that = this;
    if ($(this).hasClass('delete_MS')) {
        var id = $(this).attr("id");
    }
    var data = {
        id: id
    };

    $.ajax({
        type: "POST",
        url: "deleteparent.php",
        data: data
    }).done(function() {
        $(that).closest('tr').remove();
    });
});

答案 1 :(得分:3)

this内的

done不是锚点。

console.log(this)会显示

您可以使用bind

}).done((function() {
    $(this).closest('tr').remove();
}).bind(this))};

答案 2 :(得分:1)

选择器不应该

`$("a[href=#delete]") or $('.delete_MS')`

代替

$("a[href=#deleteparentms]")