将关闭事件按钮添加到<ul>中的每个<li>
将关闭事件按钮添加到<ul>中的每个<li>
提问于 2011-10-08 12:08:18
我想为我的<ul>中的每个<li>添加一个x按钮。此x(关闭)按钮将从<ul>中删除单个<li>。如何使用jQuery创建一个使用this删除当前项的函数？
下面是我的HTML示例：
<ul id="list_a">
<li value="1">Red <span class="closeButton">X</span></li>
<li value="2">Orange <span class="closeButton">X</span></li>
<li value="3">Green <span class="closeButton">X</span></li>
</ul>编辑:新增关闭按钮<span>
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-10-08 12:15:50
Event delegation.选择该列表，然后要求其侦听.closeButton%s上的单击事件。然后删除li或span的父项。
$("#list_a").delegate(".closeButton", "click", function() {
$(this).parent().remove();
});Stack Overflow用户
发布于 2011-10-08 12:10:44
// 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 <span class="closeButton">X</span></li>
<li value="2">Orange <span class="closeButton">X</span></li>
<li value="3">Green <span class="closeButton">X</span></li>
</ul>jsFiddle
Stack Overflow用户
发布于 2011-10-08 17:48:38
我还会用jQuery动态创建关闭按钮。
$('#list_a li').each(function(){
$(this).append($('<span/>',{html:'X',class:'closeButton'}).click(function(){
$(this).parent().remove();
}));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7694762
复制相关文章
相似问题
腾讯云开发者
