
プログラマハック
2019.12.04
プログラマーの仕事はなくならない!プログラマーの需要を徹底解説
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
jQuery
2018.11.13
jQuery の remove メソッドを使用すると、指定した要素を丸ごと削除します。これに対して、empty メソッドは、要素の中身を削除します。
今回は、jQuery の remove メソッドと empty メソッドの使い方について紹介します。
1.remove と empty
2.remove で要素を削除
3.remove で条件付き削除
4.empty で要素の中身を削除
remove メソッドは、引数の有無で 2 通りの記述方法があります。
$(セレクタ).remove( );
$(セレクタ).remove( selector );
remove メソッドの引数の内容は 以下の通りです。
.remove( selector )
selector 要素を削除する際にフィルタリングするためのセレクタを指定
empty メソッドは、次のように記述して使用します。
$(セレクタ).empty( );
remove メソッドを使用して、要素を丸ごと削除します。
ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { $("#div1").remove(); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn1" value="要素丸ごと削除"> <div id="div1" style="background-color:skyblue; padding:10px;"> <span>こんにちは</span> <span>Hello</span> <span>Bonjour</span> </div> </div>
「 $(“#div1”).remove(); 」という記述で、id 名 div1 の要素が丸ごと削除されます。
remove メソッドで削除した要素を復活させることもできます。
削除ボタンをクリックした後、復活ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { var d; $("#btn2").on("click", function() { d = $("#div3").remove(); }); $("#btn3").on("click", function() { $("#div2").append(d); }); }); //--> </script> <div id="div2" style="background-color:#CCC; padding:20px;"> <input type="button" id="btn2" value="要素丸ごと削除"> <input type="button" id="btn3" value="復活"> <div id="div3" style="background-color:pink; padding:10px;"> <span>こんにちは</span> <span>Hello</span> <span>Bonjour</span> </div> </div>
「 d = $(“#div3”).remove(); 」のように記述して、remove メソッドの実行時に 戻り値を変数 d へ代入します。
remove メソッドの戻り値には 削除した要素の情報が収められているため、削除した要素の親要素である div 要素( id名 = div2 )に対して「 $(“#div2”).append(d); 」と記述すると、変数 d に格納されている 削除済要素を再び 親要素内に配置することができます。
append メソッドの使用方法についてはjQuery【 append 】テキストや要素の追加をご参照下さい。
remove メソッドを使用して、要素を条件付きで削除します。
各ボタンをクリックしてみて下さい。
1 こんにちは
2 Hello
3 Bonjour
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn4").on("click", function() { $("span").remove(":contains('1')"); }); $("#btn5").on("click", function() { $("span").remove(":contains('2')"); }); $("#btn6").on("click", function() { $("span").remove(":contains('3')"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn4" value="1を削除"> <input type="button" id="btn5" value="2を削除"> <input type="button" id="btn6" value="3を削除"> <span style="background-color:darkkhaki;">1 こんにちは</span> <span style="background-color:plum;">2 Hello</span> <span style="background-color:darkseagreen;">3 Bonjour</span> </div>
「 $(“span”).remove(“:contains(‘1’)”); 」という記述で、文字列’1’ を含む span 要素が削除されます。
このように、remove メソッドの引数に「”:contains(‘文字列’)”」を指定すると、要素内の文字列を検索してヒットした要素を丸ごと削除することができます。
empty メソッドを使用して、要素の中身を削除します。
ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn7").on("click", function() { $("#div4").empty(); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn7" value="要素の中身を削除"> <div id="div4" style="background-color:mediumorchid; padding:10px;"> <span>こんにちは</span> <span>Hello</span> <span>Bonjour</span> </div> </div>
「 $(“#div4”).empty(); 」という記述で、id 名 div4 の要素の中身が削除されます。
上のサンプルでは、id 名 div4 の要素内の 3 つの span 要素(子要素)も全て削除され、中身が空の div 要素( div4 )だけが残ります。
div 要素( div4 )は CSS で padding:10px と指定しているため、中身が空になっても その分だけ div4 領域(背景色が紫色)が表示されます。
プログラマハック
2019.12.04
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
スキルアップ
2019.11.29
今回は、20代フリーターが正社員面接で採用されるための、面接攻略法をご紹介します。「正社員面接って何を聞かれるの?すごく緊張する」そう感じる20代フリーターは多くいます。正社員面接は、アルバイトでの面接と大きく異なります […]
スキルアップ
2019.11.27
エンジニアを目指してプログラミングスクールを検討中の方で「プログラミングスクールに通っても時間と費用を無駄にするのではないか」と不安のある方はいませんか? もちろん、プログラミングスクールに通いさえすれば誰でもエンジニア […]
プログラマハック
2019.11.22
今回は、未経験でプログラマ転職を成功させるためのおすすめポイントについて、ご紹介します。「手に職を付けたいからプログラマになりたい」と思った時、「未経験で本当にプログラマになれるの?」「プログラマになるためには、どうした […]
スキルアップ
2019.11.20
ITエンジニアの職種別平均年収とITエンジニアが年収を上げる方法を紹介します! IT業界で働く人々は高収入のイメージがありますが、実際はどうなんでしょうか。 今回は、ITエンジニアの職種別の平均年収とITエンジニアが年収 […]
スキルアップ
2019.11.15
「フリーターから正社員になりたい!」と思って、懸命に就職活動しているのに、中々内定がもらえず、「フリーターの就職は難しいな」と悩んでいませんか?今回は、そんなフリーターの方が、自分の長所やフリーター経験を活かして、いち早 […]
INTERNOUS,inc. All rights reserved.