Removing a specific li

Question

<li class="checkinUserPhotoImageContainer" id="">
  <img src="<%=checkin_image['image_url']%>"/>

    <span class="delChkPhotoImgOut">
           <span class="delChkPhotoImg"></span>
   </span>

</li>

<li class="checkinUserPhotoImageContainer" id="">
  <img src="<%=checkin_image['image_url']%>"/>

    <span class="delChkPhotoImgOut">
           <span class="delChkPhotoImg"></span>
   </span>

</li>
<li class="checkinUserPhotoImageContainer" id="">
  <img src="<%=checkin_image['image_url']%>"/>

    <span class="delChkPhotoImgOut">
           <span class="delChkPhotoImg"></span>
   </span>

</li>
<li class="checkinUserPhotoImageContainer" id="">
  <img src="<%=checkin_image['image_url']%>"/>

    <span class="delChkPhotoImgOut">
           <span class="delChkPhotoImg"></span>
   </span>

</li>

Now the span having class delChkPhotoImgOut is a delete button applied using css, I want when a user click on that button its parent li is removed from the UL list.Please Help me how to do this.

Answer 1

You can use .closest() to find the parent/ancestor <li> then .remove() it, like this:

$(".delChkPhotoImg").click(function() {
  $(this).closest("li").remove();
});

To be more specific you can use .closest(".checkinUserPhotoImageContainer") as well. A better/cheaper approach would be to use .delegate() here on the parent <ul>, like this:

$("#listID").delegate(".delChkPhotoImg", "click", function() {
  $(this).closest("li").remove();
});