jquery - jqueryによるクローズ可能なリストアイテム

Question

私はjQueryを初めて使用します..クリックするとそのリストアイテムを削除（または閉じる/非表示）するすべてのリストアイテムに加えて、クローズマークXを持つulリスト（インライン）を作成したいと思います...

例：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のドキュメントを読むことです。