2

我正在使用 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/

4

4 回答 4

4

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

我删除了 li 中的 onclick，而是引用了被单击的类并将其与下面的“this”结合起来。

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

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

于 2013-06-26T15:56:36.253 回答
3

您可以使用点击的索引来做到这一点<li>

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

编辑：这也有效：

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

见小提琴。

于 2013-06-26T15:03:55.173 回答
2

你不是说

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

此外，您可能需要考虑

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

这将上升到 DOMtree 直到它找到一个 li，如果你曾经将你的锚包裹在另一个元素中，最后一个例子不会刹车:)

于 2013-06-26T14:48:54.300 回答
1

替换以下内容：

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

希望这可以帮助。

于 2013-06-26T14:59:17.777 回答