chrome - Javascript 动态创建与删除

Question

<ul>
   <li> content <button>Delete</button></li>
   <li> content <button>Delete</button></li>
   ...
</ul>

我想要做的是，动态增加 <li>content<button>Delete</button></li> ，然后点击 button 能够删除增加的 li ，看到很多的例子，都是对已经创建好的进行删除，这种动态创建的怎么删除呢？
PS：我现在是做一个简单的 Chrome extension， 他要求不能使用 onclick, 说明

Answer 1

用事件监听就好了，给动态增加元素的父标签增加click的监听事件就可以对动态增加的元素进行点击回调操作了。我给个jQuery的示例吧(JavaScript是用addEventListener)：

$('ul').on('click', 'button', function(e){
    $(this).parent().remove();
})

http://jsfiddle.net/mFdHm/

Answer 2

可以把点击事件代理到公共父级元素上。 可以使用jquery的on, delegate来实现。
如果想使用原生的， 可以为父节点ul添加click事件， 在事件里面获得event， 通过event.target来获得点击的子元素。之后的操作就可以通过target节点来做了。

Answer 3

其实jQuery完全支持访问动态创建的元素。但是你必须绑定一个listener在包含动态创建元素的容器上，并且这个容器不能是动态创建的。你可以试试这样做:

$('ul').on('click', 'li > button', function(){
    $(this).parent().remove();
});

Answer 4

典型的委托模式的应用场景，jQuery里面可以用on,live,delegate等函数来实现。可以参考 http://www.css88.com/jqapi-1.9/ 的函数参考来进一步学习。