Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript jQuery

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

投稿日:

<目次>

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

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

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

(1-1) 概要

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

目次にもどる

(1-2) 構文

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

(構文1)

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

 

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

 

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

(1-3) サンプルプログラム

●JavaScript

サンプルでは次の2つの処理を行って居ます。
 
・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>

 

(図131)

実行結果が想定通りになっている事が確認できました。
・divタグの値(Apple,Banana)を削除
・pタグの値(Coffee,Drink)うち、class=”drink”を含むもの(Drink)を削除

(図132)実行結果

 

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript, jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介

<目次> (1) JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介  (1-1) 概要・構文  (1-2) サンプルプログラム   ●JavaScriptのサンプル   ● …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

JavaScriptでラジオボタンで選択された値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでラジオボタンで選択された値を取得する方法 (2) パターン1:formタグ内部のラジオボタン  (2-1) 単一選択肢  (2-2) 複数選択肢 (3) パター …

JavaScriptやAjaxでの処理の順序性やその制御方法について

<目次> (1) JavaScriptやAjaxでの処理の順序性やその制御方法について  (1-1) JavaScriptやAjaxの処理順序について  (1-2) Ajax処理順序制御①:異なる処理 …

JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

  <目次> (1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)  (1-1) 概要  (1-2) tagEditorの導入方法  (1-3 …

  • English (United States)
  • 日本語
Top