jQuery remove（）无效

Question

我有一个基本表，每行都有一个按钮，允许用户删除按钮所在的行。我有一个具有以下成功事件的ajax调用：

$(document).on('click', '.glyphicon-remove', function () {
    $.ajax({
        type: "POST",
        url: myAjax.ajaxurl,
        data: 
        {
            id : $(this).attr('id'),
            action : "removeEntry"
        }, 

        success:function(data)
        {
            alert("Here!");
            $(this).closest("tr").remove();
        }

    }); 
});

＆＃39;在这里＆＃39;返回正确，但remove（）语句似乎没有工作。我试过做$（this）.remove（），这也不起作用......有什么想法吗？这是表结构的样子：

    <table class="table table-bordered" id = "myTable">
    <tr>
    <th>Event Name</th>
    <th>Subdomain</th> 
    <th>Shortcode</th>
    <th>Delete</th>
    </tr>

    <tr>
    <td>This is a sample entry</td>
    <td>some data</td>
    <td>some more data</td>
    <td><a href='#'>
    <span class='glyphicon glyphicon-remove' id = 'generated_01'></span>
    </a></td>

    </tr>
    </table>

Answer 1

this不是您认为success回调

中的内容

绑定新上下文有多种方法。可能最常见的方法是存储对ajax之外的元素的引用。

$(document).on('click', '.glyphicon-remove', function () {
     var $element = $(this);
    $.ajax({
        type: "POST",
        url: myAjax.ajaxurl,
        data: 
        {
            id : $(this).attr('id'),
            action : "removeEntry"
        }, 

        success:function(data)
        {
            alert("Here!");
            $element.closest("tr").remove();
        }

    }); 
});

您还可以使用javascript bind()，还有context的{​​{1}}选项

Answer 2

在ajax success函数中，this是ajax调用（XHR对象），而不是元素。

您可以使用变量

$(document).on('click', '.glyphicon-remove', function () {

    var self = this;

    $.ajax({
        type: "POST",
        url: myAjax.ajaxurl,
        data: {id : $(this).attr('id'), action : "removeEntry"}, 
        success:function(data) {
            alert("Here!");
            $(self).closest("tr").remove();
        }
    }); 
});

或使用上下文

$(document).on('click', '.glyphicon-remove', function () {

    $.ajax({
        type: "POST",
        url: myAjax.ajaxurl,
        context : this,
        data: {id : $(this).attr('id'), action : "removeEntry"}, 
        success:function(data) {
            alert("Here!");
            $(this).closest("tr").remove();
        }
    }); 
});