Question

$('#list li a').on('click', function(e) {
    var user_id = this.parentNode.id.replace('list_', '');
    var id = 'id=' + user_id;
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "xxx.php",
        data: id,
        success: function() {
            $(this).parent().hide(); //the problem is here 
            $('.updateNumber').html(function() {
                return parseInt($(this).text(), 10) + 1;
            });
        }
    });
});

i think after the ajax call it cannot reconize the li list because of the (THIS) selector, its not referencing it correctly, thanks for your help

Answer 1

You are correct that within the Ajax callback this is not the clicked anchor. The following should work:

    $('#list li a').on('click', function(e) {

        var user_id = this.parentNode.id.replace('list_', '');
        var id = 'id=' + user_id;
        e.preventDefault();

        var $a = $(this);

        $.ajax({
        type: "POST",
        url: "xxx.php",
        data: id,
        success: function(){
            $a.parent().hide();
            $('.updateNumber').html(function(){
               return parseInt($(this).text(),10)+1;
            });
        });
    });

Save a reference to the clicked link outside the $.ajax() call. The callback function has access to variables in its containing scope.