Web制作初心者必見！jQueryで要素を削除するためのメソッドを紹介

jQueryは動的なWebサイトを作るために使われます。動的なWebサイトとはコードを変更することなくHTMLの要素やCSSのプロパティや値を追加・変更・削除することができます。動的なWebサイトにすることでユーザーの目を引いたり、欲しい情報だけを表示させることができます。

本記事では、jQueryで要素を削除するための方法を解説します。要素の削除はjQueryの基本的な操作になるので、Web制作初心者におすすめです。

jQueryで要素を削除するメソッド：remove()

jQueryで要素を削除するにはremoveというメソッドを使います。removeとは英語で「削除」の意味を持ちます。基本構文は以下の通りです。

$('セレクタ').remove();

セレクタには削除した要素を入れます。remove()は単独で使われることは少なく、「イベントが発生したら削除する」ということがほとんどです。例えば、ボタンがクリックされたら画像を削除するというコードは以下の通りです。

<button>削除</button>
<img src="image.png" />

$('button').on('click', function () {
  $('img').remove();
});

イベントの設定方法については下の記事を参考にしてください。

jQueryで削除する要素の指定方法

id、classを指定して削除する

要素を指定する際にid名やclass名を指定して削除もできます。セレクタの部分にid名の前には「#」、class名の前には「.」を入れます。id名またはclass名を「del」としたとき、コードは以下の通りです。

$('#del').remove(); //id名の削除
$('.del').remove(); //class名の削除

子要素を削除する

子要素の削除はchildrenメソッドと組み合わせることで可能です。<ul>の子要素である複数の<li>を削除したいとします。ここでセレクタを<ul>として削除すると<li>も一緒に消えますが、<ul>を残したいとします。コードは以下の通りです。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

$('ul').children().remove();

childrenメソッドを入れることでセレクタの持つ子要素を指定します。そして、指定した子要素に対して削除を行います。

指定した文字が入った要素を削除する

removeメソッドの()内に’:contains(“削除したい文字が入った要素”)’とすることで要素の中に入っている文字を指定して削除することも可能です。例えば、pタグの中に「こんにちは」という言葉が入っていたら削除するとします。コードは以下の通りです。

$('p').remove(":contains('こんにちは')");

気をつけたいのはremoveの()内のクォーテーションとダブルクォーテーションの使い分けです。remove全体を囲うものとcontainsの中に入るものでクォーテーションまたはダブルクォーテーションが別でなければいけません。

例えば、上記コードで「こんにちは」を囲うのがシングルクォーテーションになるとエラーになります。つまり、下の記述になるとエラーになるため、気を付けてください。

$('p').remove(':contains('こんにちは')');

削除した要素を復活させる

削除した要素を復活させるにはappendメソッドを使います。まず、削除するためのコードを変数に格納します。appendメソッドの引数には削除するためのコードを格納した変数を指定します。分かりにくいと思うので以下のコード例を参考にしてください。

<button class="remove">削除</button>
<button class="append">復活</button>
<div>
  <p>ここが削除復活します</p>
</div>

var x;
$('.remove').on('click', function () {
  x = $('p').remove();
});
$('.append').on('click', function () {
  $('div').append(x);
});

remove()以外でjQueryで要素を削除する方法

empty()

emptyメソッドは要素の中を空にするメソッドです。例えば、pタグの中の文章を消したいと思った場合は以下のコードとなります。

<p>こんにちは</p>

$('p').empty();

上記のコードが実行されると、HTMLは以下のコードのような表示となります。

<p></p>

emptyを使えば子要素も簡単に削除することができます。親要素をセレクタとすれば親要素の中には子要素が入っているので、子要素を削除したのと同じことです。コードは以下の通りです。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

$('ul').empty();

コード実行後のHTMLは以下のようになります。

<ul></ul>

unwrap()

unwrapメソッドはセレクタで指定したの親要素を削除するためのメソッドです。セレクタで指定した要素は残します。コード例は以下の通りです。

<div>
  <p>文章が入ります</p>
</div>

$('p').unwrap();

コード実行後のHTMLは以下のようになります。

<p>文章が入ります</p>

まとめ

要素を削除するためにはremoveメソッドを使います。また、他のchildrenやappendというメソッドと組み合わせることで、特定の要素を削除したり、削除した要素を復活させることもできます。

要素が削除できると画面の狭い端末や情報が多すぎるサイトの場合など、ユーザーにとって邪魔になる要素を消すことができます。ユーザーにとって見やすいサイトにするためにもjQueryで要素を削除する方法は知っておくことをおすすめします。