JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryでテーブルの行を削除する方法をわかりやすく解説

イベント委譲を使って行の追加・削除を実装する

jQueryでは、イベント委譲（Event Delegation）を活用することで、Webページ上に「新しい行を追加する」ボタンと「テーブルの行を削除する」ボタンの両方を効率的に実装できます。イベント委譲を使えば、JavaScriptで後から動的に追加した要素に対しても、イベントハンドラが正しく機能するという大きなメリットがあります。

手順1：削除ボタンを設定する

まず、テーブルの各行に配置する削除ボタンを用意します。あとでjQueryから参照できるよう、class属性に「deletebtn」を指定しておきましょう。

<button type="button" class="deletebtn" title="Remove row">X</button>

手順2：on()メソッドでクリックイベントを発生させる

ボタンがクリックされたときにイベントを発火させるには、jQueryのon()メソッドを使用します。documentに対してイベントを委譲することで、動的に追加された行のボタンにも対応できます。

$(document).on('click', 'button.deletebtn', function () {
    $(this).closest('tr').remove();
    return false;
});

このコードでは、クリックされたボタンからclosest('tr')によって最も近い祖先であるtr要素（＝その行）を取得し、remove()メソッドで該当行を削除しています。

サンプルコード全体

以下は、jQueryを使ってテーブルから行を削除する機能の完全なコード例です。「Add new Row」ボタンを押すと最初の行が複製されて新しい行が追加され、各行の「X」ボタンを押すとその行だけが削除されます。

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var x = 1;
        $("#newbtn").click(function () {
            $("table tr:first").clone().find("input").each(function () {
                $(this).val('').attr({
                    'id': function (_, id) {
                        return id + x
                    },
                   'name': function (_, name) {
                        return name + x
                    },
                   'value': ''
            });
        }).end().appendTo("table");
        x++;
    });

    $(document).on('click', 'button.deletebtn', function () {
        $(this).closest('tr').remove();
        return false;
    });
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>

まとめ

テーブルの行削除は、$(this).closest('tr').remove()の組み合わせだけでシンプルに実現できます。ポイントは、イベントをdocumentに委譲するon()メソッドを使うことです。これにより、後から動的に追加された行の削除ボタンでも、確実にクリックイベントを受け取れるようになります。行の追加・削除が必要なフォームや管理画面などで、ぜひ活用してみてください。

  1. TkinterのボタンでPythonアプリケーションを終了する方法

    Tkinterで作成したGUIアプリケーションを、ボタンのクリックひとつで終了できると便利です。この記事では、Tkinterのボタンを使ってPythonプログラム（ウィンドウ）を終了させる手順を、サンプルコード付きでわかりやすく解説します。 実装の手順 tkinterライブラリをインポートし、tkinterフレーム（ウィンドウ）のインスタンスを作成します。 geometry()メソッドを使って、ウィンドウのサイズを設定します。 ウィンドウを閉じるためのclose()関数を定義します。関数の中でwin.destroy()メソッドを呼び出します。 ボタンを作成し、クリック時にclose()関数が

  2. PythonとMySQLでテーブルからレコードを削除する方法を徹底解説

    データベースを運用していると、テーブルから特定の行（レコード）を削除する必要が生じることがあります。例えば、クラスの生徒情報を管理するテーブルがあるとしましょう。ある生徒がクラスを退会した場合、その生徒の情報はもう不要になるため、該当する行をテーブルから削除する必要があります。 MySQLでは「DELETE FROM」ステートメントを使用して、テーブルから行やレコードを削除します。「WHERE」句を使うことで、削除対象の行を指定できます。なお、WHERE句を指定しない場合は、テーブル内のすべてのレコードが削除されてしまうため注意が必要です。 構文 すべての行を削除する場合 − DELETE F