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

このエントリーをはてなブックマークに追加
PR

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プラグインと組み合わせれば、消したことを記録させて何日後まで表示させないなどといった使い方もできますね

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)