Getting closest li with jQuery

Question

I try to get with jQuery the closest li on button click and remove it but doesn't seems to fire

here is my markup

<li class="dd-item dd3-item" data-id="22">
    <div class="dd-handle dd3-handle"></div>
    <div class="dd3-content">some other
        <span class="pull-right" style="display: none;">
            <a data-target="#settings_22" data-action="collapse" href="#"><i class="fa fa-pencil"></i></a>
        </span>
    </div>

    <form method="post" action="#" class="menu_settings" style="display: block;">
        <input type="hidden" value="22" name="id">
        <fieldset>

            <div role="toolbar" class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button type="button" data-action="update" class="update btn btn-default"><i class="fa fa-upload"></i> Update</button>
                    <button type="button" data-action="delete" class="delete btn btn-default"><i class="fa fa-trash-o"></i> Trash</button>
                    <button type="button" class="cancel btn btn-default"><i class="fa fa-times"></i> Cancel</button>    
                </div>                                
            </div>
        </fieldset>                        
    </form>
</li>

jQuery

$('button.update, button.delete').on('click', function(e) {
    e.preventDefault();
    var url = ajaxurl + '?action=updateCategories';
    var data = $(this).closest('form').serialize();
    var action = $(this).data('action');
    $.ajax({
        type: "POST",
        url: url,
        data: {
            data: data,
            command:action
        },
        //contentType: "application/json; charset=utf-8",
        //dataType: "json",
        cache: false,
        success: function(html) {
            if (action == 'delete') {
                alert('delete');
                $(this).closest('li').remove();
            }
        }
    });
});

I do get the alert but the list is not removed

Answer 1

By default, the success callback is executed with this referencing window; this is probably not what you want.

You can bind this in the success callback using the context option of $.ajax:

$.ajax({
    ...,
    context: this,
    ...
});

This makes sure using $(this) inside the success callback will be the clicked element.