jQueryを使った消せる要素の作成手順
jQueryを使った消せる要素の作成手順をご紹介していきます。
3手順で実装可能です。
- HTMLを作成する
- jQueryを実装する
- CSSで見た目を整える
詳しく見ていきましょう。
手順1:HTMLを作成する
まず、消せる要素を表示させたい箇所に以下のコードを記述します。
<div id="parent">
<p>ここに内容を記述します</p>
<p id="parent_button">×</p>
</div>
上記のHTMLは基本的なものです。
実装後、ご自身の好みのものに変更していただいて構いません。
手順2:jQueryを実装する
jQueryを実装します。
以下のコードをfooter.phpなどに記述してください。
<script>
$("#parent_button").on("click", function(){
$("#parent").remove();
});
</script>
簡単に説明しますと、【#parent_button】という要素をクリックすると、【#parent】という要素を非表示にすると定義しています。
jQuery本体を読み込んでいませんと、上記のコードは機能しません。
予めjQuery本体を読み込んでおいてください。
手順3:CSSで装飾する
最後にCSSで見た目を装飾します。
下記は装飾の一例です。
#parent {
width: 500px;
padding: 10px;
background: #fff;
border: 1px solid #ccc;
position: relative;
}
#parent_button {
position: absolute;
top: -7px;
right: -7px;
font-size: 120%;
background: #ccc;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 30px;
text-align: center;
cursor: pointer
}
スタイルシートなどに追記してください。
装飾は自由に変更してください。上記はあくまで一例です。
まとめ
jQueryを使った消せる要素の作り方をご紹介しました。
- HTMLを作成する
- jQueryを実装する
- CSSで見た目を整える
上記の手順を行いますと、以下の様な要素が作成できます。
右上のバツをクリックするとこの要素が消えます
使い方は色々とあると思います。
せひ、活用してください。
コメントを残す