jQuery和Ajax

I am quite new to JS and JQ so I am ask this basic question. I have code like this:

      $(".delete").click(function() {    
    var commentContainer = $(this).parent();
    var id = $(this).attr("id");            
    var string = 'id='+ id ;
    $.ajax({   
        url: "<?php echo site_url('messages/delete') ?>",
        type: "POST",
        data: string,
        cache: false,
        success: function(){
            commentContainer.slideUp('1500', function() {$(this).remove();
                $('#messages').fadeOut('1000');
            });               
        }   
    });
    return false;
});

For now it is working like it should. But I want to add something more. Div with id #messages contains all messages, and I wish that upon deleting message it fadeout(it is working) and then load new data and present all messages again without the deleted one. Also, there is a counter that counts unread messages, and I created separate page for ajax purpose, but I don't know how to go on from fadeOut.

This is the code from the seperate page:

<?php if(isset ($messages)) { ?>
    <?php foreach ($messages as $msg){ ?>
      <div class="col_3">             
<?php     
      if($msg['read'] == 0){ echo 'Status of message: Unreaded';}
      elseif($msg['read'] == 1){echo 'Status of message: Readed';}
     echo "<p>Message from: $msg[name]</p>";
     echo "<p>Sender email: $msg[email]</p>";        
     echo "<p>Message: <br />$msg[message]</p>"; ?>
     <a href="#" class="delete" id="<?php echo $msg['id'] ?>">Delete message</a>
      </div>

I edited code a bit, but still nothing.

  $(".delete").click(function() {    
    var commentContainer = $(this).parent();
    var id = $(this).attr("id");            
    var string = 'id='+ id ;
    $.ajax({   
        url: "<?php echo site_url('messages/delete') ?>",
        type: "POST",
        data: string,
        cache: false,
        success: function(){
            commentContainer.slideUp('600', function() {$(this).remove();
                $('.messages').fadeOut('2000', function(){$(this).remove();
                    $('#messages').load("<?php echo site_url('messages/show') ?>").show().fadeIn('1000');
                }); 
            });               
        }   
    });
    return false;
});

When I look page source I can see that the content has been changed, but it is not displayed.

I didn't quite understand what you are trying to do but if this is what you mean by saying but I don't know how to go on from fadeOut you can put a callback function to fadeOut

$('#messages').fadeOut('1000', function () {
   // Do something here
);