Question

I have a link inside a <li> element and want the <li> element to be removed when the link is clicked. Here is my code:

<li id='i80'>
 <div class='singleitem'>
  <img src='/css/images/image.png' width='30' height='30' />
  <div id='listtext'><h1>Title</h1></div>
  <a class='delete' id='80' href='#'></a>
  <div id='helper'></div>
 </div>
</li>

And my Jquery code:

$(".delete").click(function(e){
 var del_id = $(this).attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     $(this).closest("li").remove();
   }
 });
});

The ajax is working fine and the ‘deleted’ status is being sent back correctly, however, that one line that involves removing the parent li just doesn’t work. Any ideas? Thanks.

EDIT:

I’ve noticed that new list items I’ve added dynamically to my existing ul don’t work here. Is that because this just loads when the page loads initially and then won’t work with with dynamically updated content?

Answer 1

$(this) object within ajax block isn’t $(“.delete”) object. You will need to do something like this:

$(".delete").click(function(e){
 var $del_button = $(this);
 var del_id = $(this).attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     $del_button.closest("li").remove();
   }
 });
});