jQueryのremove()で要素を削除する方法まとめ!

こんにちは、ライターのマサトです!

今回は、jQueryで特定の要素を削除することができる「remove()」メソッドについて学習をしていきましょう!

この記事では、

  • 「remove()」とは?
  • 基本的な使い方
  • classを指定して削除
  • 削除した要素を復活する
  • という基本的な内容から、

  • 「removeAttr()」で属性を削除
  • 指定の子要素を削除する
  • 「removeClass()」によるスタイルの削除
  • などの応用的な使い方に関しても解説していきます。この記事で、「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>サンプルテキスト1</p>
        <p class="two">サンプルテキスト2</p>
    </div>
    
    <script>
        $('.two').remove();
    </script>
    </body>

    実行後のHTML

    <div>
        <p>サンプルテキスト1</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()」についてまだよく分からないという方は、基本から応用技までを次の記事で詳しくまとめているので参考にしてみてください!

    jQueryのappendでDOM要素を追加する方法まとめ!
    更新日 : 2019年5月4日

    指定の子要素を削除する

    次に、「remove()」を使った子要素の削除手法について見ていきましょう!「remove()」を使うと、指定した要素はもちろんのこと子要素も含めてすべて削除されてしまいます。

    そこで、子要素だけを削除したい場合はどのようにすれば良いでしょうか?

    例えば、次のサンプル例を見てください!

    <body>
    <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
    </ul>
    
    <script>
        $('ul').remove();
    </script>
    </body>

    この例では、リスト要素が配置されておりul要素を対象にして「remove()」を実行しています。この場合だと「ul要素内」にある子要素の「li」が削除されますが、ul要素も同時に削除されてしまうわけです。

    そこで、jQqueryでは子要素だけを対象にできる「children()」メソッドがあるので、これを上手く活用してみましょう!次のサンプル例を見てください!

    <body>
    <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</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()」について学習をしてきました!

    最後に、もう一度ポイントをおさらいしておきましょう!

  • 「remove()」は引数を指定することで任意のHTML要素を検出して削除することができる
  • 「remove()」の戻り値を活用することで削除した要素を復活させることも可能
  • よく一緒に使われる「removeAttr()」は属性を削除し「removeClass」はclass名を削除できる
  • 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

    「プログラミング、右も左もわからない…」という方にオススメ

    当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

    その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

    侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

    cta_under_bnr

    「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

    書いた人

    マサト

    フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
    30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

    おすすめコンテンツ

    まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

    転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー