클래스에서 li 항목을 제거하십시오.

Question

아이콘을 클릭하면 목록 항목을 제거하려고하는 표가 있습니다. 내가 휴지통 아이콘 휴지통 아이콘 만을 클릭하면

그래서, 그 목록 항목을 제거하고, "최대"다른 사람을 이동하려는.

<div class="container"> 
    <div class="list">TO-DO LIST<div class="glyphicon glyphicon-plus"></div></div> 
    <ul class="toDoList" style="list-style: none;"> 
     <li id="addToDo"><input type='text' id="addToDoText" placeholder="Add New ToDo"></input></li> 
     <li><span><i class="fa fa-trash"></i></span>Buy Robes</li> 
     <li><span><i class="fa fa-trash"></i></span>Fight Malfoy</li> 
     <li><span><i class="fa fa-trash"></i></span>Buy New Wand</li> 
     <li><span><i class="fa fa-trash"></i></span>Kill Voldemort</li> 
     <li><span><i class="fa fa-trash"></i></span>Feed Hedwig</li> 
     <li><span><i class="fa fa-trash"></i></span>Send Owl to Sirius</li> 
     <li><span><i class="fa fa-trash"></i></span>Do Dishes</li> 
     <li><span><i class="fa fa-trash"></i></span>Wash Robes</li> 
     <li><span><i class="fa fa-trash"></i></span>Buy Hagrid's Birthday Gift</li> 
    </ul> 
</div> 

그리고 항목을 제거 할 때 테이블 색상을 유지하기위한 코드를 포함하고있는 jQuery가 있습니다.

$(document).ready(function(){ 
    color_table(); 
}); 

function color_table(){ 
    $('.toDoList li:nth-child(odd)').addClass('alternate'); 
}; 

$('li .fa-trash').on("click", function(){ 
    var index = $(this).index(); // ...doesn't do anything. b/c no index of the class? 
    var text = $('li').text(); // gets LI text correctly of current item 
    console.log(index+" // "+text); 
    $(this).remove(); // This should remove the LI entry, not just the icon class .fa-trash. If I use $('li').remove(), it removes the entire li list! Not just the current one. 
    color_table(); 
}) 

Answer 1

당신은 조상 li를 얻을 수 closest() 방법을 사용해야합니다.

$(this).closest('li').remove(); 

Answer 2

당신은 당신이 사용할 수있는 대신 부모 li을 대상으로한다 :이 도움이

$(this).parents('li').remove(); 

희망을.