jquery - 单击列表末尾的图标删除动态创建的 列表项

Question

我有一个<li > 使用 jquery 动态创建的列表。该列表有一个输入字段和一个用于删除列表项的减号图标。以下是将新项目插入列表的示例代码:

$list = $("#servicesList");
$list.append(""<li data-value='" + uniqueIdentifier + "'>
(same line) <input type='text' class='input-mini' id='price' value='2500'>
(same line) <i id='icon-minus' class='icon-minus-sign'></i></li>

此列表项动态添加到 div servicesList 中，它是一个 ul 项。

<ul id="servicesList">
</ul>

现在，当有人单击列表项的减号图标时，我需要删除该项目。由于列表项是动态生成的，因此我使用文档方法添加单击事件监听器。这是不起作用的代码。

$(document).on('click','#icon-minus',function() {
    var $list =  $("#servicesList"),
    listValue = $(this).attr("data-value");
    $list.find('li[data-value="' + listValue + '"]').slideUp("fast", function() 
            {
              $(this).remove();
            });

上面的代码不起作用。如果我将“#servicesList li”传递给单击函数，则代码可以工作，但即使单击文本输入字段，列表项也会被删除。我希望仅在单击减号图标时删除列表项。

Answer 1

我认为有两个问题:如果你点击减号，$(this)指<i>元素，而不是父元素 <li>元素，因此您无法在 var listValue 中获得正确的值.

其次，我认为您不想使用 icon-minus 的 id而是一个类，因为页面上有多个 icon-minuses(id 是唯一的)。

示例: http://jsfiddle.net/X9nFX/5/