Question

I have a link that posts to a url (ajax). Then I want to hide the entire li.

HTML

<li>Product Name <a href="/delete/item_id" class="del">Delete</a></li>

JQUERY

$(function(){ 
    $(".del").click(function () {
        var link = $(this).attr('href');
        $.post(link, function() {
             $(this).parent().slideUp();
         return false;
        });  
        event.preventDefault();
    });
});

Answer 1

The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won’t work. You can easily fix this by saving a reference to the li-element outside the success-handler:

$(function(){ 
    $(".del").click(function () {
        var link = $(this).attr('href');
        var li = $(this).parent();
        $.post(link, function() {
             li.slideUp();
         return false;
        });  
        event.preventDefault();
    });
});