Trouble using jquery.closest to pick out page element

Question

'Kay apologies for whats probably going to be an easy question, and my hacky code too :P But I've been racking my brains and looking at the documentation for hours now and I'm going round in circles, my code is basically functional but I'm failing to pick a text value from the rec-outlay tag and I can't work out why.

Heres am example of my HTML:

<div class='item'>
<p class='issue-title'><strong>Lorem Ipsum</strong></p>
<a class='del-issue' href='#' onclick='document.delIssForm.delIss.value=59;'>Delete</a>

<div class='issue-fix'>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.</p>

    <p class='rec-outlay'>40.0</p>
</div>
</div>

<div class='item'>
<p class='issue-title'><strong>Lorem Ipsum</strong></p>
<a class='del-issue' href='#' onclick='document.delIssForm.delIss.value=59;'>Delete</a>

<div class='issue-fix'>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.</p>

    <p class='rec-outlay'>40.0</p>
</div>
</div>

When the Delete link is clicked jquery fires off a confirmation dialogue, This is all fully functional, apart from the bit where I try to subtract one value from another, can someone point me in the right direction please?!

$(document).ready(function(){

$('.del-issue').click(function(){

    var elem = $(this).closest('.item');
    var clicked = {id: $(this).val()};
    // var total = $('input[id=CostToSolve]').val();

   $.confirm({
        'title'        : 'Delete Confirmation',
        'message'    : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
        'buttons'    : {
            'Yes'    : {
                'class'    : 'blue',
                'action': function(){
                    /* elem.slideUp();
                    var dataString = 'delIss=' + document.delIssForm.delIss.value;
                    $.ajax({
                    type: "POST",
                    url: "delIssue.php",
                    data: dataString 
                    }); */

                    // entry is to be deleted catch the value in the outlay box
                    var total = $("#CostToSolve").val();

                    // HELP!!!!!
                    $(this).closest('.item-fix').find('.rec-outlay').text();
                        total -= (parseInt($(this).text(), 10) || 0);


                    // Then update the value in the input
                    $('#CostToSolve').val(total + ".00");

                    // Prevent script from doing anything further
                    return false;
                } 
            },
            'No'    : {
                'class'    : 'gray',
                'action': function(){}    // Nothing to do in this case. You can as well omit the action property.
            }
        }
    });

});

});

Answer 1

Oh Yeah I got it!

I used the pre-existing definition of 'elem'

var elem = $(this).closest('.item');

And then found the text value like this, now my script works perfectly :)

// Modify it
$(elem).find('.rec-outlay').each(function(i, ele) {
    total -= parseInt($(ele).text(),10) || 0;
});

Answer 2

You are inside the scope of 'action': function() when trying to use $(this).closest, in which case, is not the same this as above.

this is always bound to the deepest function your code runs in.

Try to save the original element in a more global-ish variable that will scope down to the next function, like so:

$('.del-issue').click(function(){
    var that = this;
    var elem = $(this).closest('.item');

    ...
    'action': function(){
          $(that).closest...
          ...
    }
    ...

in this case that will refer to del-issue. this is a common practice in preserving the this variable through a function chain.