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

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");
}
);
});