jQuery remove() not working

Question

I have a basic table with a button in each row that allows the user to remove the row in which the button resides. I have an ajax call that has the following success event:

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

    }); 
});

The 'Here' gets returned correctly, but the remove() statement doesn't seem to be working. I have tried doing $(this).remove() and that does not work either... Any thoughts? Here is what the table structure looks like:

    <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 is not what you think it is inside the success callback

There are various ways to bind a new context. Probably the most common approach is store a reference to element outside of 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();
        }

    }); 
});

You can also use javascript bind() and there is also a context option of $.ajax

Answer 2

Inside the ajax success function, this is the ajax call (XHR object), not the element.

You can either use a variable

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

or use context

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