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;
});