jQueryのremove()メソッドの意味や使い方

投稿日：2021年6月13日

＜目次＞

(１) jQueryのremove()メソッドの意味や使い方
　 (１-１) 概要
　 (１-２) 構文
　 (１-３) サンプルプログラム

(１) jQueryのremove()メソッドの意味や使い方

JavaScriptで見かける「$(“[セレクタ]”).remove()」の記述について、意味や使い方をご紹介します。

(１-１) 概要

はじめに、「$(“[セレクタ]”).remove()」はjQuery（JavaScriptのライブラリ）を使った記述で、要素の値を削除するために使用します。

＞目次にもどる

(１-２) 構文

$( )内に[セレクタ]、つまり削除対象の要素名（”div”や”p”など）を指定します。

（構文１）

$(“[セレクタ]”).remove()

更に、セレクタの中でも特定のclass属性を持つもののみを対象に削除したい場合はremove()の中にそのclass属性値を指定します。例えば、divタグの値のうち、class=”drink”のもののみを消したい場合は次のように書きます。

（例）

$(“div”).remove(“.drink”)

「$(function(){…});」の記述はjQueryの機能で、documentが準備完了次第、中身のfunctionを実行するものです。本記事ではこの部分は詳しくは触れませんが、興味のある方はこちらの記事「jQueryの$(document).ready()とは？意味や使い方をご紹介」もご覧頂けたらと思います。

＞目次にもどる

(１-３) サンプルプログラム

●JavaScript

サンプルでは次の２つの処理を行って居ます。

・divタグの値を全て削除

・pタグの値のうち、classが「drink」のもののみ削除

$(function(){
    //# divタグの値(Apple,Banana)を削除
    $("div").remove();
 
    //# pタグの値(Coffee,Drink)うち、class="drink"を含むもの(Drink)を削除
    $("p").remove(".drink");
});

●JSP

実際に要素を消す対象のHTML（JSP）も参考までにご紹介します。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/IT0xxx_jQueryRemoveTest.js" type="text/javascript" charset="UTF-8"></script>
<title>jQuery remove Test</title>
</head>
<body>
<h2>■jQueryの"$"挙動確認①</h2>
(1) <div id="result1_1" class="apple">Apple</div>
<br />
(2) <div id="result1_2" class="banana">Banana</div>
<br />
(3) <p id="result1_3" class="coffee">Coffee</p>
<br />
(4) <p id="result1_4" class="drink">Drink</p>
<br />
</body>
</html>