今回は、jQueryで要素を削除する「.remove()」メソッドを使って実装。
ページを表示したときにidで指定した対象を削除するものに仕上げたのと、ボタンをクリックした時にも対象を削除するものに仕上げたので備忘録。
記事や画像などのコンテンツを編集中でアップしない時や、コンテンツの一覧画面で表示しないものを消したいときに使えそうです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.ページを表示したときにidを指定した対象を消しておく。
↓
STEP2.ボタンをクリックしたときに要素を削除する。
STEP1-1. 画面を作成する
まずは画像や文のコンテンツ部分をつくっていきます。
それぞれのコンテンツにdivで囲み、それぞれにidを指定します。
次の画像はページを表示させたときに消すコンテンツにdivを付けている例です。
今回は単一なのでid指定ですが、複数のコンテンツに対して動作させたいときはclassで指定するといいです。
今回、htmlファイルには画面内の装飾で気になった個所にcss入れていますが、ポイントはdivで囲んでidを指定することです。装飾については、一時的なものなのでcssもhtmlファイル内に書いています。
それでは以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; } h1{ font-weight:bold; font-size:32px; margin:0 0 20px 20px; border-left:15px solid #E91E63; } p{ margin-top:20px; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <div class="row"> <div class="col-sm-6"> <div id="ok"> <img src="./img/flower1.jpg" alt="表示してOKな画像"> <p>こちらはjQueryで消さないほうの要素です。<br> 少しダミーテキストいれます。どうでしょうか。どげんでしょうか。</p> </div> </div> <div class="col-sm-6"> <div id="ng"> <img src="./img/flower2.jpg" alt="表示してNGな画像"> <p>こちらはjQueryで削除するほうの要素です。<br> どうなっとるですか。実装時に削除されていたら成功です!</p> </div> </div> </div> <div class="row"> <div class="col-sm-4" id="d1"> <p><img src="./img/kuma1.jpg" alt="クリック時に削除する画像1"></p> <p><button class="btn">削除</button></p> </div> <div class="col-sm-4" id="d2"> <p><img src="./img/kuma2.jpg" alt="クリック時に削除する画像2"></p> <p><button class="btn">削除</button></p> </div> <div class="col-sm-4" id="d3"> <p><img src="./img/kuma3.jpg" alt="クリック時に削除する画像3"></p> <p><button class="btn">削除</button></p> </div> </div> </div>
ここまでだと、次の画像みたいにコンテンツがすべて表示されている状態になっていると思います。↓
コンテンツを表示するページが作成できたら、続いてjQueryを記述するファイルを作っていきます。
jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. ページを表示したときにidを指定した対象を消しておく
jQueryでページを表示したときにidを指定した対象を消していきます。
ここで『.remove()』メソッドを使っていきます。
以下の内容を「sample.js」に記述します。
//要素を削除する $(function(){ $('#ng').remove(); });
どうですか?
次の画像みたいに画像が消えていたらOKです。
※画像が消えない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. クリック時の動作範囲にidを指定する
STEP1-1で記述したボタンにクリック時に削除するためにidを指定していきます。
ここでのポイントは、削除する動作をさせたい範囲をdivで囲んでidを指定することと、削除する動作の部品にidを指定することです。
それでは以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; } h1{ font-weight:bold; font-size:32px; margin:0 0 20px 20px; border-left:15px solid #E91E63; } p{ margin-top:20px; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <div class="row"> <div class="col-sm-6"> <div id="ok"> <img src="./img/flower1.jpg" alt="表示してOKな画像"> <p>こちらはjQueryで消さないほうの要素です。<br> 少しダミーテキストいれます。どうでしょうか。どげんでしょうか。</p> </div> </div> <div class="col-sm-6"> <div id="ng"> <img src="./img/flower2.jpg" alt="表示してNGな画像"> <p>こちらはjQueryで削除するほうの要素です。<br> どうなっとるですか。実装時に削除されていたら成功です!</p> </div> </div> </div> <div class="row"> <div class="col-sm-4" id="d1"> <p><img src="./img/kuma1.jpg" alt="クリック時に削除する画像1"></p> <p><button class="btn" id="db1">削除</button></p> </div> <div class="col-sm-4" id="d2"> <p><img src="./img/kuma2.jpg" alt="クリック時に削除する画像2"></p> <p><button class="btn" id="db2">削除</button></p> </div> <div class="col-sm-4" id="d3"> <p><img src="./img/kuma3.jpg" alt="クリック時に削除する画像3"></p> <p><button class="btn" id="db3">削除</button></p> </div> </div> </div>
STEP2-2. ボタンをクリックしたときに要素を削除する
jQueryで「削除」ボタンをクリックしたときに対象する範囲(今回は画像)を削除していきます。
『.remove()』メソッドにくわえて『.click()』メソッドを使っていきます。
以下の内容を「sample.js」に記述します。
//クリック時に要素を削除する $(function(){ $('#db1').click(function(){ $('#d1').remove(); }); $('#db2').click(function(){ $('#d2').remove(); }); $('#db3').click(function(){ $('#d3').remove(); }); });
どうですか?
次の画像みたいに「削除」ボタンをクリック時に画像が消えていたらOKです。
※「削除」ボタンをクリックした時に画像が消えない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓