jQuery closest() not working
<p>I have an AJAX method that deletes a row from a database from a list of results from the database. Once the row has been successfully deleted, I want jQuery to fade out that row from the page.</p>

<p>After clicking on the delete button, the row is successfully deleted from the database, but the list item that is the parent of the button that was clicked does not fade out when searching for it using closest().</p>

<p>Here is my DOM:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;div class="two columns alpha"&gt;
        &lt;/div&gt;
        &lt;div class="ten columns"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;
                &lt;li&gt;&lt;p&gt;&lt;/p&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="admin_buttons"&gt;
            &lt;div class="two columns"&gt;
                &lt;button type="submit" class="admin_button edit_event"&gt;Edit&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="two columns omega"&gt;
                &lt;button type="submit" value="5" class="admin_button delete_event"&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Here is the jQuery:</p>

<pre><code>$(document).on('click', '.delete_event', function() {
    $.ajax({
        type: 'POST',
        url: 'php/deleteEvent.php',
        cache: false,
        data: {
            id: $(this).val()
        },
        success: function(data) {
            if(data === 'Error') {
                alert('Error: event not deleted.');
            }
            else
            {
                $(this).closest("li").fadeOut('slow');
            }
        }
    });

});
</code></pre>
