こんにちは、ライターのマサトです！
今回は、jQueryで特定の要素を削除することができる「remove()」メソッドについて学習をしていきましょう！
この記事では、
という基本的な内容から、
などの応用的な使い方に関しても解説していきます。この記事で、「remove()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「remove()」とは？
それでは、まず最初に「remove()」メソッドについての基本的な知識から学んでいきましょう！
「remove()」は、対象となる要素や子要素などを削除することができるメソッドになります。例えば、次のようなHTML要素があるとします。
<div>
<h1>タイトル</h1>
<p>サンプルテキスト</p>
</div>
「h1要素」だけを削除したい、あるいは「p要素」だけを削除したいようなケースでremove()は役立ちます！もちろん、子要素も含めて丸ごと削除するような使い方も可能です。
本記事では、remove()メソッドについての基本から応用技まで学習できますので、ぜひ参考にしてみてください！
基本的な使い方
ここからは、実際に「remove()」メソッドを使いながらプログラミング手法を学んでいきましょう！
一般的な記述方法としては、【 対象要素.remove() 】のように対象とする要素にそのままremove()を実行すればOKです。次のサンプル例を見てください！
<body>
<div>
<h1>タイトル</h1>
<p>サンプルテキスト</p>
</div>
<script>
$('div').remove();
</script>
</body>
この例では、div要素に囲まれた「h1 / p」要素が配置されていますね。このdiv要素に対して、「remove()」を実行することでdiv要素を丸ごと削除しているわけです。
注意点としては、子要素である「h1 / p」要素も含めてdivタグ内はすべて削除されるという点を覚えておきましょう！
classを指定して削除
「remove()」メソッドは引数を指定することで、対象となる要素を特定することも可能です。
引数には、単純なHTMLタグを記述しても良いですが、classやidなどの属性を指定することもできます。次のサンプル例を見てください！
<body>
<div>
<p>サンプルテキスト１</p>
<p class="two">サンプルテキスト２</p>
</div>
<script>
$('.two').remove();
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト１</p>
</div>
この例では、div要素内に2つのp要素が配置されており、1つはclass属性が付与されています。そこで、class属性値「two」を使って対象要素を決め、remove()を実行しているのが分かりますね。
実行後のHTMLを見ると、見事にclass属性が付与されていたp要素だけが削除されています！
フィルタリングについて
先ほどは属性を指定して削除を行いましたが、もしその属性が付与されていない場合はどうすれば良いでしょうか？
最も簡単なのは、「remove()」の引数に「:contains()」を指定することです！これにより、要素内の文字列を検出して削除することが出来るようになるのです！
次のサンプル例を見てください！
<body>
<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
<script>
$('p').remove(':contains("こんにちは")');
</script>
</body>
この例では、3つのp要素が配置されています。そこで、p要素に対して「remove(‘:contains(“こんにちは”)’)」と記述することで、2つ目のp要素だけが削除されるのです！
つまり、2つ目のp要素は「こんにちは」という文字列が含まれているため、条件に合致していることになり削除されるのです。
このように「:contains()」を利用すると、特定の要素だけを削除しやすくなるので忘れないようにしておきましょう！
削除した要素を復活する
「remove()」メソッドは実行すると「戻り値」として、削除した要素を返してくれる特徴があります。この点を上手く活用すれば、削除した要素を復活させることも簡単に実現できます！
次のサンプル例を見てください。
<body>
<div>
<p>サンプルテキスト</p>
</div>
<button>復活</button>
<script>
const p = $('p').remove();
$('button').click(function() {
$('div').append(p);
});
</script>
</body>
この例では、div要素内に単純なp要素が配置されており、その外側にボタン要素が配置されています。
注目すべき点は、remove()を実行した時に変数「p」へ戻り値を代入している点です！これにより、削除したp要素の情報が変数「p」に格納されているわけです。
そのため、div要素に対して「append(p)」と記述することで格納されたp要素を再びdiv要素内に配置しています。つまり、ボタンをクリックすることで削除されたはずのp要素が復活して表示されるというわけですね！
ちなみに「appned()」についてまだよく分からないという方は、基本から応用技までを次の記事で詳しくまとめているので参考にしてみてください！
指定の子要素を削除する
次に、「remove()」を使った子要素の削除手法について見ていきましょう！「remove()」を使うと、指定した要素はもちろんのこと子要素も含めてすべて削除されてしまいます。
そこで、子要素だけを削除したい場合はどのようにすれば良いでしょうか？
例えば、次のサンプル例を見てください！
<body>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
<script>
$('ul').remove();
</script>
</body>
この例では、リスト要素が配置されておりul要素を対象にして「remove()」を実行しています。この場合だと「ul要素内」にある子要素の「li」が削除されますが、ul要素も同時に削除されてしまうわけです。
そこで、jQqueryでは子要素だけを対象にできる「children()」メソッドがあるので、これを上手く活用してみましょう！次のサンプル例を見てください！
<body>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
<script>
$('ul').children().remove();
</script>
</body>
注目すべきは「remove()」の記述例です！対象となるul要素に対して、「children().remove()」と記述していますよね？
まず、「children()」で子要素だけを対象にしてから「remove()」を実行することで、「li要素」だけを削除することに成功しているわけです。
ちなみに、この記述の短縮形として「$(‘ul’).empty()」と記述しても同じ効果が得られるので覚えておきましょう！
「removeAttr()」で属性を削除
「remove()」メソッドと一緒によく使われる「removeAttr()」についてもご紹介しておきます！「remove()」がHTML要素を削除するのに対して、「removeAttr()」はHTML要素の属性を削除することができるメソッドです。
記述方法としては、【 対象要素.removeAttr( 属性名 ) 】のように引数へ削除したい属性名を指定すればOKです。次のサンプル例を見てください！
<body>
<p id="text" class="sample">サンプルテキスト</p>
<script>
$('p').removeAttr('class');
</script>
</body>
実行後のHTML
<p id="text">サンプルテキスト</p>
この例では、「id」「class」属性が付与されたp要素が配置されていますね。
このp要素に対して、「removeAttr(‘class’)」と記述することでclass属性を削除することが出来るわけです。実行後のHTMLを見てみると、id属性だけが付与されているのが分かりますね！
「removeClass()」によるスタイルの削除
最後に、「removeClass()」についても学んでおきましょう！「removeClass()」は、HTML要素に付与されているclass名だけを削除することができるメソッドになります。
記述方法も簡単で、【 対象要素.removeClass( class名 ) 】のように引数へ削除したいclass名を指定すればOKです！次のサンプル例を見てください！
<body>
<p class="sample text test">サンプルテキスト</p>
<script>
$('p').removeClass('text');
</script>
</body>
実行後のHTML
<p class="sample test">サンプルテキスト</p>
この例では、複数のclass属性値が付与されたp要素が配置されています。
このp要素に対して、「removeClass(‘text’)」と記述することでclass名「text」だけが削除されるというわけです。
実行後のHTMLを見てみると、「text」だけが削除されて他のclass名はそのまま残っているのが分かりますね。また、引数に何も指定しなければすべてのclass名を削除することも可能です！
<body>
<p class="sample text test">サンプルテキスト</p>
<script>
$('p').removeClass();
</script>
</body>
実行後のHTML
<p class="">サンプルテキスト</p>
先ほどの例で、引数なしのremoveClass()を実行していますね。実行後のHTMLを見ると、すべてのclass名が削除されているのが分かります。
このように、特定のclass名を意図的に削除できることで、要素のスタイルをjQuery側から調整できるので便利です。
まとめ
今回は、jQueryで特定のHTML要素を削除することができる「remove()」について学習をしてきました！
最後に、もう一度ポイントをおさらいしておきましょう！
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
