单击列表末尾的图标删除动态创建的 <li> 列表项

Posted 2023-03-05

【中文标题】单击列表末尾的图标删除动态创建的 <li> 列表项

【英文标题】：Delete the dynamically created <li> list item on clicking icon at the end of the list

【发布时间】：2012-12-18 20:45:22

【问题描述】：

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

$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”传递给单击功能，则代码有效，但即使单击文本输入字段，列表项也会被删除。我希望仅在单击减号图标时删除列表项。

【参考方案1】：

ID 应该始终是唯一的（这就是它被称为 ID 的原因）。因此，请确保将所有 ID 更改为 class 并尝试以下操作：

$(document).on('click','#icon-minus',function() 
  var $list =  $("#servicesList"),
  
  $(this).parent().slideUp("fast", function() 
  
      $(this).remove();
   );

【参考方案2】：

我想你所有的按钮都共享同一个 ID ID 必须是每页唯一的。使用 class 代替您的按钮

并在您的$list.append( 中修复您的引号

【参考方案3】：

第一个问题是您可能添加了多个元素，所有元素都具有相同的icon-minusid 属性。在 html 页面中，每个元素的 id 属性必须是唯一的。我会改用这个类：

$(document).on('click','.icon-minus-sign',function() 

下一个问题是事件处理函数内部的this 引用了<i> 元素，所以这一行：

listValue = $(this).attr("data-value");

不起作用； this 引用的元素没有 data-value 属性。您需要访问包含 <i> 元素的 <li>：

$(this).closest('li').slideUp("fast", function() 
    $(this).remove();
);

【参考方案4】：

我刚刚尝试了这段代码，它正在工作：http://jsfiddle.net/Vc3zg/

$("#servicesList").append('<li><input type="text" value="" /> <span id="icon-minus">X</span></li>');

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

【参考方案5】：

我认为有两个问题：如果你点击减号，$(this) 指的是<i> 元素，而不是父<li> 元素，所以你在var listValue 中没有得到正确的值。

其次，我认为您不想为icon-minus 使用 id，而是使用类，因为页面上有多个图标减号（id 是唯一的）。

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