从其类中删除li项

Question

我有一张桌子，当我点击一个图标时，我试图删除一个列表项。

因此，当我点击垃圾桶图标和垃圾邮件图标时，我想删除该列表项，并移动其他人＆＃34; up＆＃34;。

<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

您应该使用closest()方法获取祖先li。

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

Answer 2

您应该定位父li，您可以使用：

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