第4回 要素の操作&ユーティリティ編連載:jQuery逆引きリファレンス(7/19 ページ)

» 2010年02月12日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 要素セット配下に含まれる子要素をすべて削除するには、emptyメソッドを使います。emptyメソッドでは要素だけではなく、要素に関連付いたイベントリスナやキャッシュ・データも合わせて削除の対象となります。

 以下は、<div>要素をクリックすると、その配下の要素/テキストをまとめて削除する例です。

<style type="text/css">

.self {
  background-color : Yellow;
  height: auto;
  width : 400px;
}

</style>

  ……中略……

<script type="text/javascript">

$(function() {

  // <div>要素をクリックしたときの挙動を定義
  $('div').click(function() {

    // クリックされた要素の配下をクリア
    $(this).empty();
  });
});

</script>

  ……中略……

<div class="self">.NET Frameworkの新たなWebフレームワーク<strong>ASP.NET MVC</strong>がいよいよ登場です。</div>

<div class="self">本書ではASP.NET MVCを初めて学ぶ人のために、基本的なフレームワークの構造から<i>スキャフォールディング機能、ルーティング、ビューヘルパー</i>……までを包括的に解説します。</div>

リスト066 <div>要素クリック時に、その配下のコンテンツを削除(Empty.htm)
このHTMLを実際にブラウザで開く


ブラウザで開く


1行目をクリック



行をクリック


リスト066の実行結果
<div>要素をクリックすると、その内容が破棄される

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。