Question

我正在使用jquery在加载DOM后动态添加和删除项目符号。

这是添加子弹的代码，可以正常工作：

// 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。

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

上述任何一种方法在FireFox中运行良好，但在Chrome中均无效。关于解决方案的任何想法？

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

Answer 1

我使用了所提供答案的组合。

我删除了li中的onclick，而是引用了被点击的类，并将其与'this'组合在一起，如下所示。

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

这是适用于FireFox和Chrome的jsfiddle：http://jsfiddle.net/jjgelinas77/CsAJn/27/

Answer 2

您可以使用点击的<li>

的索引来执行此操作

$('li').on('click', function() {
    $(this).parent().children('li:eq(' + $(this).index() + ')').remove();
});

编辑：这也有效：

$('li').on('click', function() {
    $(this).remove();
});

请参阅fiddle。

Answer 3

你不是说

$(this).parent().remove();

另外，您可能需要考虑

$(this).closest('li').remove();

这会在DOMtree上升，直到它找到一个li，如果你把你的锚包装在另一个元素中，最后一个例子不会制动：）

Answer 4

替换以下内容：

$('#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>');

用这个：

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

$('#'+datum._id).bind({
   click: function(o) {
      $(this).remove();
   }
});

希望这有帮助。

从ul中删除动态创建的li

4 个答案: