【jQuery】tableのtbody要素をすべて削除する／行を空にする方法

2023.06.13 / 2023.06.13

【jQuery】tableのtbody要素をすべて削除する／行を空にする方法

本記事ではjQueryを使用した、テーブルtableのtbody要素すべての行を削除する方法とテーブルの行を空にする方法について解説していきます。

Webアプリケーションではテーブルを動的に操作することが多いです。ボタンのクリック時にすべての行を削除または空にするといった操作はよく実装します。

ここではjQueryのempty()メソッドやremove()メソッドを使ったテーブル操作（すべての行を削除、空にする方法）を解説します。

サンプルコード

本記事の解説では以下のサンプルコードを利用して解説していきます。

<table class="table table-bordered table-sm">
    <thead>
        <tr class="table-light" style="text-align:center;">
            <th scope="col">氏名</th>
            <th scope="col">年齢</th>
            <th scope="col">性別</th>
        </tr>
    </thead>
    <tbody class="target">
        <td class="target-child">Office</td>
        <td class="target-child">54</td>
        <td class="target-child">男</td>
    </tbody>
    <tbody class="target">
        <td class="target-child">Taro</td>
        <td class="target-child">32</td>
        <td class="target-child">男</td>
    </tbody>
    <tbody class="target">
        <td class="target-child">Tanaka</td>
        <td class="target-child">24</td>
        <td class="target-child">女</td>
    </tbody>
</table>

tableのサンプル

tableの中にはクラスtargetがついたtbody要素が3つ、tbody要素の子要素としてクラスtarget-childeがついたtd要素が３つあります。

jQueryを使ったこのtableから行を空にする方法と削除する方法について次項より解説していきます。

jQuery：テーブルのtbody要素をすべて削除する方法

jQueryによるテーブルのtbody要素をすべて削除する方法は以下２つあります。

tableからtbody要素をすべて削除する方法

tbodyにempty()メソッドを使用
tbodyにremove()メソッドを使用

それぞれの方法について解説していきます。

tbodyにempty()メソッドを使用

tbody要素の削除にempty()メソッドを使用することで見た目上は行tbodyが削除されたように表示されます。

構文

$(セレクタ).empty();

サンプルコードで使用する場合、以下のように記述します。

$('.taget').empty ();

見た目上というのがここでは重要であり、実はtbody要素自体はempty()メソッドでは削除されません。

なぜならempty()メソッドは指定したセレクタの子要素を削除するメソッドだからです。tbody要素は残して中身のtd要素だけを削除したいような特殊な場合を除いて、基本的には次項で解説するremove()メソッドを使います。

tbodyにremove()メソッドを使用

tbody要素を削除する方法としてremove()メソッドを使う方法があります。

構文

$(セレクタ).remove();

remove()メソッドは指定した要素を削除するメソッドです。指定した要素に子要素も含まれていれば、子要素も同時に削除します。

サンプルコードで使用する場合、以下のように記述します。

$('.taget').remove();

remove()メソッドで指定した行や先頭行、最終行を削除する方法は以下記事で解説しています。

empty()メソッドとremove()メソッドの違い

本項で使用したempty()メソッドとremove()メソッドの違いは以下の通りです。

empty()メソッドは指定要素の子要素を削除する
remove()メソッドは指定要素および子要素を削除する

つまり子要素のみを削除するならempty()メソッド、指定要素も削除したいならremove()メソッドを使うということです。

jQuery：テーブルの行をすべて空にする方法

jQueryを使用してテーブルの行をすべて空にするにはempty()メソッドを使用します。すでに解説しているようにempty()メソッドは指定要素の中身を削除します。

サンプルコードではtd要素に対してempty()メソッドを使えば中身が空になるということです。

$('.taget-child').empty();

ちなみにtd要素の中にinput要素がある場合で、input要素の中身を空にしたい場合はval()メソッドを使用します。

val()メソッドは指定要素のvalue属性を取得、変更するためのメソッドです。つまりval()メソッドを使ってinput要素のvalue属性を空にするということです。

$(セレクタ).val('');

まとめ

本記事「【jQuery】tableのtbody要素をすべて削除する／行を空にする方法」はいかがでしたか。以下に重要な点をまとめます。

まとめ

tbody要素を残して中身を削除するならempty()メソッドを使う
tbody要素を含めてすべて削除するならremove()メソッドを使う
テーブル行の中身を空にするならempty()メソッドを使う
td要素の中にinput要素があるならばval()メソッドを使ってvalueを空にする

本記事を参考にして、テーブルを動的に操作できるようになりましょう。