【保存版】jQueryでテーブル行を削除するサンプルコード集

jQueryでテーブル行を削除するベストな方法

jQueryは、JavaScriptをより簡単に記述するためのライブラリです。テーブル行の削除など、複雑な操作も簡潔なコードで実行できます。

方法

jQueryでテーブル行を削除する方法はいくつかありますが、最もよく使われる方法は以下の2つです。

remove() メソッドは、選択された要素とその子孫要素をすべて削除します。

例

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

// 2行目を削除
$("table tr:nth-child(2)").remove();

detach() メソッドは、選択された要素をDOMツリーから削除しますが、要素自体はメモリに残ります。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

// 2行目を削除
var row = $("table tr:nth-child(2)").detach();

// 後で再び追加することも可能
$("table").append(row);

• 削除した要素を二度と使用しない場合は、remove() メソッドを使うのがおすすめです。

上記以外にも、empty() メソッドや filter() メソッドなどを使ってテーブル行を削除することができます。

注意点

テーブル行を削除する前に、必ずその行に関連するデータも削除するようにしてください。

HTML

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>30</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>25</td>
  </tr>
  <tr>
    <td>斎藤</td>
    <td>40</td>
  </tr>
</table>

JavaScript

remove() メソッドを使う

// 2行目を削除
$("table tr:nth-child(2)").remove();

// 2行目を削除
var row = $("table tr:nth-child(2)").detach();

// 後で再び追加することも可能
$("table").append(row);

実行結果

1. remove() メソッドを使う場合、2行目が削除されます。
2. detach() メソッドを使う場合、2行目が削除されますが、row 変数に格納されているため、後で再び追加することができます。

その他のサンプル

• 特定の条件に合致する行を削除する
• ボタンをクリックした時に

jQueryでテーブル行を削除するその他の方法

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

// 2行目を削除
$("table tr:nth-child(2)").empty();

2行目の内容がすべて削除されます。

filter() メソッドは、選択された要素のうち、特定の条件に合致する要素のみを残します。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>30</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>25</td>
  </tr>
  <tr>
    <td>斎藤</td>
    <td>40</td>
  </tr>
</table>

// 年齢が30歳以上の行を削除
$("table tr").filter(function() {
  return $(this).find("td:nth-child(2)").text() >= 30;
}).remove();

年齢が30歳以上の行がすべて削除されます。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

// 2行目から4行目を削除
$("table tr").slice(1, 4).remove();

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

// 2行目を削除
$("table tr:nth-child(2)").parent().remove();

closest() メソッドは、選択された要素から、特定のセレクターに合致する最初