Удаление конкретного 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, я хочу, когда пользователь нажимает на эту кнопку его родительский литий удаляется из UL list.Please Помогите мне, как это сделать ,

Answer 1

Вы можете использовать .closest() найти родителя/предка <li> затем .remove() его, как это:

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

Чтобы быть более точным вы можете использовать .closest(".checkinUserPhotoImageContainer"), а также. Лучшим/более дешевым подходом было бы использовать .delegate() здесь, на родительском <ul>, например:

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