Question

我想为<li>中的每个<ul>添加一个x按钮。此x（关闭）按钮将从<li>中删除该<ul>个人。如何使用jQuery创建一个使this删除当前项的单个函数？

继承我的HTML示例：

<ul id="list_a">
  <li value="1">Red&nbsp;&nbsp;<span class="closeButton">X</span></li>
  <li value="2">Orange&nbsp;&nbsp;<span class="closeButton">X</span></li>
  <li value="3">Green&nbsp;&nbsp;<span class="closeButton">X</span></li>
</ul>

编辑：添加了关闭按钮<span>

Answer 1

// Use live to bind click event to each element with closeButton class and remove it
$('.closeButton').live('click', function(){
    $(this).parent().remove();
});

<ul id="list_a">
   <li value="1">Red&nbsp;&nbsp;<span class="closeButton">X</span></li>
   <li value="2">Orange&nbsp;&nbsp;<span class="closeButton">X</span></li>
   <li value="3">Green&nbsp;&nbsp;<span class="closeButton">X</span></li>
</ul>

jsFiddle

Answer 2

Event delegation.选择列表，然后让它听取.closeButton上的点击事件。然后移除li或span的父级。

$("#list_a").delegate(".closeButton", "click", function() {
    $(this).parent().remove();
});

Answer 3

我还会使用jQuery动态创建关闭按钮。

$('#list_a li').each(function(){
    $(this).append($('<span/>',{html:'X',class:'closeButton'}).click(function(){
        $(this).parent().remove();
    }));
});

为<ul> </ul> </li>中的每个<li>添加一个关闭事件按钮

3 个答案: