jQueryを使ってクリックでタグ（要素）を削除する色々なパターン

jQueryで簡単に要素を削除する方法

jQueryの.click(function)でタグがクリックされた時に色々な動作を与えることが出来ます
Webサイトに色々なアクションを付けるのがこれで簡単になります
今回は色々な消え方のDEMOを作りました

DEMO 表示

HTML コード

    <div class="sample1">
        <p>クリックで消滅 自分が消滅</p>
        <p>クリックで消滅 自分が消滅</p>
        <p>クリックで消滅 自分が消滅</p>
    </div>
    <div class="sample2">
        <p>クリックで親ごと消滅</p>
    </div>
    <div class="sample3">
        <p>クリックで下の文が消滅</p>
        <span>消える文字</span>
    </div>
    <div class="sample4">
        <p>右ペケをクリックで閉じる<span>×</span></p>
    </div>

jquery コード

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
//クリックされた対象がスライドアップで消える
$(".sample1 p").click(function () {
  $(this).slideUp();
});

//クリックされた親のタグ（要素が消える）
$(".sample2 p").click(function () {
  $(this).parent().fadeOut(2000);
});

//クリックされたものとは別のものが消える
$(".sample3 p").click(function () {
  $(this).next().hide();
});

//ダイアログを表示して不要な場合は消せるようにした場合など
$(".sample4 span").click(function () {
  $(this).parents(".sample4").hide();
});

</script>

消したり出したりで何が出来るかといえば、ダイアログとかの表示をしたり、それを消したりと役立ちます。
例えば訪問した時に表示するウェルカム文章をクリックで消せるようにする、さらにjqueryのcookieプラグインと組み合わせれば、消したことを記録させて何日後まで表示させないなどといった使い方もできますね