删除特定的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>

现在具有类delChkPhotoImgOut的跨度是使用css应用的删除按钮，我想当用户单击该按钮时，其父li从UL列表中删除。请帮助我如何执行此操作。

Answer 1

您可以使用.closest()查找父/祖先<li>然后.remove()，如下所示：

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

更具体地说，您也可以使用.closest(".checkinUserPhotoImageContainer")。更好/更便宜的方法是在父<ul>上使用.delegate()，如下所示：

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