jQuery

jQueryで子要素を削除する方法(empty)

本記事では、jQueryで子要素を削除することができるemptyメソッドの使い方について詳しく解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

子要素を削除する

対象の子要素を削除する場合、emptyメソッドを使います。emptyメソッドは子要素の削除と同時にイベントハンドラや内部でキャッシュしているデータも削除します。

使い方は以下のとおりです。

$("対象要素").empty();

emptyメソッド以外にも「$(“対象要素”).children().remove();」で対象の子要素を削除することが可能ですが、コードの可読性が悪くなるのでemptyメソッドを使用することを推奨します。

実際にemptyメソッドを使った時の挙動を確認できるサンプルコードは以下のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="parent">
      <p class="child">子要素</p>
    </div>
    <button id="del-btn">子要素を削除する</button>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </body>
</html>
$("#del-btn").on("click", function () {
  $(".parent").empty();
});

jQuery削除メソッド一覧

jQuery 要素削除一覧
unwrap親要素の削除
remove対象要素の削除
empty子要素の削除
detachデータやイベント情報を残したまま対象要素の削除

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村