jquery - jquery的可关闭列表项

Question

我是 jQuery 的新手..我希望创建一个 ul 列表（内联），除了每个列表项之外，它还有一个关闭标记 X，单击时应该删除该列表项（或关闭/隐藏它）...

例如：我想要在 stackoverflow 上向问题添加标签时出现的相同效果。我们可以通过单击除每个标签之外的 X 来删除选定的标签

提前感谢您的帮助

Answer 1

像这样？：http: //jsfiddle.net/s8rzu/1/

Answer 2

看看我刚刚制作的这个例子：http: //jsfiddle.net/ZDgSX/1/。

有很多方法可以给这只猫剥皮，但我可能会这样做，创建一个基本列表：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

然后，使用 jquery .append() 函数，在每个列表项的末尾添加一个链接，如下所示：

$('ul li').append(' <span>[<a href="#">X</a>]</span>');

这样一来，没有 javascript 的人将无法点击对他们没有任何帮助的链接。

然后，您基本上需要做的就是为“X”链接创建一个点击事件，然后从 DOM 中删除 li 元素。

$('ul span a').on('click', function(){
    $(this).closest('li').remove();
});

一开始有很多事情要弄清楚，但是阅读jquery文档是更详细地了解这些函数（以及更多）功能的好方法。