Why is it that the following script works clientside by removing the relievant html entity:

$(".ui-delete").click(function() {

$.ajax({
    url: 'delete.aspx',
    type: 'POST',
    data: { strWidgetID:$(this).parents(".widget").attr("id") },
    error: function() { alert('Error'); },
    success: function() { alert('Success'); }
});


$(this).parents(".widget:first").remove();

});

But the following query which is "more proper", does not work by removing the html entity?

$(".ui-delete").click(function() {

$.ajax({
    url: 'delete.aspx',
    type: 'POST',
    data: { strWidgetID:$(this).parents(".widget").attr("id") },
    error: function() { alert('Error'); },
    success: function() {
        alert('Success');
        $(this).parents(".widget:first").remove();
    }
});

});

The first script does both clientside and serverside correctly, the second script does serverside correctly, but on clientside, it just displays an alert "success", but does not remove the html entity "widget"

Any ideas?