$(this) not selecting element in callback function
<p>I have 2 different set of codes, the only difference is the location of <code>$(this).closest('.organizer_listing').slideUp('fast');</code>. In the first set of code, it works, but I prefer for that line of code to be as in the 2nd set of code inside the callback function, which no longer works - <code>slideUp</code> does not seem to be executed. </p>

<p>Why is this so? How should I fix it?</p>

<p><strong>Variation 1</strong></p>

<pre><code>$("input[type=checkbox]:checked").each(function() {
    $(this).closest('.organizer_listing').slideUp('fast');  // Remove listings visually from list
    // Send AJAX request to delete from database
    var listing_id = $(this).closest('.organizer_listing').data('listing_id');
    $.ajaxSetup({ cache: false });
    $.getJSON(base_url + 'organizer/delete_favorite',
        {listing_id: listing_id},
        function(json) {
            $.modal.close();
    });
});
</code></pre>

<p><strong>Variation 2</strong></p>

<pre><code>$("input[type=checkbox]:checked").each(function() {
    // Send AJAX request to delete from database
    var listing_id = $(this).closest('.organizer_listing').data('listing_id');
    $.ajaxSetup({ cache: false });
    $.getJSON(base_url + 'organizer/delete_favorite',
        {listing_id: listing_id},
        function(json) {
            $.modal.close();
            $(this).closest('.organizer_listing').slideUp('fast');  // Remove listings visually from list
    });
});
</code></pre>
