Affecting only clicked container after ajax call

Affecting only clicked container after ajax call

Hey everyone here's the deal.

I'm doing the delete a comment system where I wish to click a delete link on a wished comment, sending a $.post call to php script to delete the post from DB and then removing it from the users screen.

Everything works ok until I add the function(data) in $.post call. I want to be able to display an error if data returned from the delete script is not 'ok'.

However as function(data) is nested inside the $.post I can't access the clicked object anymore. Here's my Jquery that I hope will make things clearer

$(document).ready(function(){
   
   $('.article .btn-delete').click(function(){
      if(confirm('Are you sure you wish to delete article - ' + $(this).attr('title'))){
         $.post('save.php',
            { articleId: $(this).attr('id') },
            function(data) {
               if(data == 'ok') {
                  $(this).parents('.article').fadeOut('slow'); // this is the issue. because 'this' now refers to function and if I use ('.btn-delete').parents('.article').hide('slow') it hides each .article div on page   
               } else {
                  alert('There was an error deleting the article');
               }
            });
      }
            
      return false;
   });
});


hope somebody can help