FadeOut for same link that was clicked

I want with click on each link, after click on button ok in myalert() same link is fadeOut(). if clicked on cancel, is not fadeOut(). How can fix it with use of function myalert() ?

Example: http://jsfiddle.net/MaGyp/11/

function myalert() {
    var result = true;
    //var hide = $('.alert').fadeOut(100);
    //var css = $('#appriseOverlay').css('display','none');
    var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
    $('body').append($alertDiv);
    $('.ok').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
   开发者_运维问答     callback(true);
    });
    $('.cancel').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
        callback(false);
    });
    $alertDiv.fadeIn(100);
    $('#appriseOverlay').css('display', 'block');
    return result;
};

$('.iu').click(myalert)

function callback(result) {
    //
    if (result) {
        $(this).fadeOut('slow');//I mean, this part from code
    } else {
        alert('no')
    }
}

Change your callback implementation to also pass along the value of the link that was clicked (jsFiddle).

function myalert() {
    var result = true;
    //var hide = $('.alert').fadeOut(100);
    //var css = $('#appriseOverlay').css('display','none');
    var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');

    var link = this; //save the clicks link
    $('body').append($alertDiv);
    $('.ok').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
        callback(true, link); //pass along the clicked link
    });
    $('.cancel').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display', 'none');
        callback(false, link);
    });
    $alertDiv.fadeIn(100);
    $('#appriseOverlay').css('display', 'block');
    return result;
};

$('.iu').click(myalert)

function callback(result, link) {
    if (result) {
        $(link).fadeOut('slow');//fade out the clicked link
    } else {
        alert('no')
    }
}

It's a matter of knowing what element you clicked on in the callback function:

// pass e (the event object to "myalert")
function myalert(e) {
    var result = true;
        //var hide = $('.alert').fadeOut(100);
        //var css = $('#appriseOverlay').css('display','none');
        var $alertDiv = $('<div class="alert">Do you want to delete this item?<button class="ok">ok</button><button class="cancel">cancel</button></div>');
    $('body').append($alertDiv);
    $('.ok').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display','none');

        // pass the clicked element to the callback function
        callback(true, e.target);

    });
    $('.cancel').click(function () {
        $('.alert').fadeOut(100);
        $('#appriseOverlay').css('display','none');

        // pass the clicked element to the callback function
        callback(false, e.target);

    });
    $alertDiv.fadeIn(100);
    $('#appriseOverlay').css('display','block');
return result;
};

$('.iu').click(myalert) // the event object will be passed to myalert

// takes the result, and the clicked element
function callback(result, el) {
    //
    if(result){
       $(el).fadeOut('slow'); 
    }else{
       alert('no')
    }
}

http://jsfiddle.net/swatkins/fLSeD/