Question

我正在尝试通过使用放置在同一<li>元素内的图标上的click事件从<ul>中删除<li>元素。 <li>元素是动态创建的。

html看起来像

<ul id="lista_enlaces_ul" class="collection with-header">
    <li class="collection-header">
        <h4>Enlaces añadidos</h4>                            
    </li>
    <li class="collection-item"><div>Enlace Random<i class="secondary-content delete_icon material-icons">delete_forever</i></div></li>
</ul>

因此，当单击具有<i>类的delete_icon时，应删除其<li>父级。

这是.on()事件

$("#lista_enlaces_ul").on("click", "i.delete_icon", function (e) {

});

我已经尝试了几种方法来尝试找到ul中的li元素的索引以将其删除，但是我无处可寻...

Answer 1

您可以使用$(this).closest('li').remove();或$(this).parents('li').remove();

$("#lista_enlaces_ul").on("click", "i.delete_icon", function(e) {
    $(this).closest('li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lista_enlaces_ul" class="collection with-header">
    <li class="collection-header">
        <h4>Enlaces añadidos</h4>                            
    </li>
    <li class="collection-item"><div>Enlace Random<i class="secondary-content delete_icon material-icons">delete_forever</i></div></li>
</ul>

Answer 2

$("#lista_enlaces_ul").on("click", "i.delete_icon", function (e) {
$(e.target).parents('li').remove();
});

单击该li jquery中的图标时，从列表中删除li元素

2 个答案: