How do I hide the parent element of one that triggered an action with jQuery?

Question

I have this code in html (notice the numers 1 and 2in the outside and inside elements):

<div class="list_item" id="item_1">
<div class="list_item_int">My first line</div>
<div class="eval_buttons">
    <div class="approve" id="1"></div>
    <div class="dismiss" id="1"></div>
</div>

<div class="list_item" id="item_2">
<div class="list_item_int">My second line</div>
<div class="eval_buttons">
    <div class="approve" id="2"></div>
    <div class="dismiss" id="2"></div>
</div>

Then I have this script:

$().ready(function(){
    $(".approve").click(function(){
        $.post(
            "php/judge_work.php",
            {action : "1", work_info : this.id},
            function(data){
                $("#item_" + this.id).hide("slow");
            }
        );
    });
    $(".dismiss").click(function(){
        $.post(
            "php/judge_work.php",
            {action : "0", work_info : this.id},
            function(data){
                alert(data);
            }
        );
    });
});

Is there a way to make $("#item_" + this.id).hide("slow"); work? thanks on your kind response.

Answer 1

You can use .closest(), like this:

$(this).closest(".list_item") //gets the ancestor <div class="list_item">

In your case since this won't be the clicked element in the $.post() callback, it'll look like this:

$(".approve").click(function(){
   var li = $(this).closest(".list_item");
   $.post(
        "php/judge_work.php",
        {action : "1", work_info : this.id},
        function(data){
            li.hide("slow");
        }
   );
});