从ul中删除动态创建的li [英] Removing a dynamically created li from ul

查看:110
本文介绍了从ul中删除动态创建的li的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用jquery在DOM加载后即时添加和删除项目符号.

I'm using jquery to add and remove bullets on the fly after the DOM is loaded.

下面是添加可以正常工作的项目符号的代码:

Here's the code to add a bullet which works fine:

// add bullet
$('#linkedEventList ul').append('<li id=' + datum._id + '>' + datum.headline + ' <a href=javascript:; title=delete onclick=remove(this) class=itemDelete>(x)</a> <a href=/events/' + datum._id + '>(open)</a></li>');

现在这是删除被单击的项目符号的代码,该项目在Firefox中可以正常工作,但在Chrome中无法正常工作.在Chrome中,超链接将被删除,而不是父级或li.

Now here's the code to remove the clicked bullet, which works fine in Firefox, but does not work right in Chrome. In Chrome, the hyperlink is removed and not the parent or li.

// remove bullet
//$(link).closest('li').remove();
$(link).parent().remove();

以上两种方法在FireFox中均能正常工作,但在Chrome中均无法使用.关于解决方案有什么想法吗?

Either method above works fine in FireFox, but neither works in Chrome. Any ideas on the solution?

jsfiddle: http://jsfiddle.net/jjgelinas77/CsAJn/14/

jsfiddle: http://jsfiddle.net/jjgelinas77/CsAJn/14/

推荐答案

我使用了提供的答案的组合.

I used a combination of the answers provided.

我删除了li中的onclick,而是引用了要单击的类,并将其与"this"组合,如下所示.

I removed the onclick in the li, and instead referenced the class being clicked and combined that with 'this' as per below.

$('#linkedEventList').on('click', '.itemDelete', function(){
$(this).parent().remove();
});

以下是在FireFox和Chrome中均可使用的jsfiddle: http://jsfiddle.net/jjgelinas77/CsAJn/27/

Here's the jsfiddle that works in both FireFox and Chrome: http://jsfiddle.net/jjgelinas77/CsAJn/27/

这篇关于从ul中删除动态创建的li的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆