jQueryで動的に要素の追加・削除を行う

約 1 分
jQueryで動的に要素の追加・削除を行う

久々にjQueryに触れたので備忘録がてら要素の動的な追加・削除について書いていきたいと思います。

作成するものとしては「追加」ボタンをクリックするとボタンの上にinput要素が追加され、要素横にある「削除」ボタンをクリックするとその要素が削除されるというとてもシンプルなものです。
私がすっかりと忘れていた追加した要素に対してイベントを当てるやり方についても触れていますので誰かのお役に立てれば幸いです!!

見た目を作る

CSSのフレームワークであるBootstrapを使用しています。

今回jQueryを使用するのでhead内でjQueryとBootstrapを読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>jQueryテスト</title>
  <link rel="stylesheet" href="./css/bootstrap.css"> // Bootstrap
  <script src="./js/jquery-3.4.1.min.js"></script>   // jQuery読み込み
</head>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQueryテスト</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/bootstrap.bundle.js"></script>
</head>
<body>

<div class="container mt-5">
  <table class="table">
    <tbody>
      <tr>
        <td>
          <input type="text" class="form-control" id="username" name="text" placeholder="comment here">
        </td>
        <td>
          <button class="btn btn-danger" id="removeBtn">削除</button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" class="form-control" id="username" name="text" placeholder="comment here">
        </td>
        <td>
          <button class="btn btn-danger" id="removeBtn">削除</button>
        </td>
      </tr>
    </tbody>
  </table>

  <button class="btn btn-primary" id="addBtn">追加</button>
</div>

</body>
</html>

私はjQueryを公式サイトからダウンロードしていたのでそれを読み込んでいますがCDN(コンテンツデリバリネットワーク)を利用しても動作する、かつダウンロード不要で簡単に使えます。

下記にある「Google Hosted Libraries」からCDNを利用することが出来ます。

jQueryのScriptタグがあるのでコピーしてheadタグに貼り付ければ使用可能になります!

Google Hosted Libraries

要素を追加する

appendメソッドを使えば簡単に要素を追加出来ます。

要素を追加する方法はappend以外にもafter/prepend/beforeメソッド等がありますが別の記事で紹介したいと思います。

見慣れないかもしれませんが ``(バッククォート) はJavaScriptのテンプレートリテラルと呼ばれる記法です。

テンプレートリテラルについては↓の記事が参考になるかと思います。
https://qiita.com/kura07/items/c9fa858870ad56dfec12

<script>
  // ページの読み込みが完了してから実行されるように$(function(){});を記述

  $(function() {

    $('#addBtn').on('click', function() {

      const HTML = `

        <tr>

          <td><input type="text" class="form-control" id="username" name="text" placeholder="comment here"></td>

          <td> <button class="btn btn-danger" id="removeBtn">削除</button></td>

        </tr>
      `

      $('tbody').append(HTML);

    })

  });
</script>

// ここで要素をtbodyに変数HTMLを挿入しています。
$('tbody').append(HTML);

「append()」の記述方法は、【 対象要素.append( 追加したい要素 ) 】

要素を削除する(動的に追加した要素にイベントを設定)

追加ボタンを押して追加された要素に対してイベントを動作させるには↓

 $(document).on(イベント名(click, keyupなど), セレクタ, function() {});

作成されていない要素に対してはクリックイベントが動作しません。
なのでページ読み込み後、動的に追加される要素に対してはdocumentを使用します。

今回で言えばイベント名は’click‘、セレクタはid=”removeBtn”なので“#removeBtn”になります。

// 下記を追加する
$(document).on('click', '#removeBtn', function() {

  $(this).parents('tr').remove();

})

最終的なコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryテスト</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/bootstrap.bundle.js"></script>
</head>
<body>
  <div class="container mt-5">
    <table class="table">
      <tbody>
        <tr>
          <td><input type="text" class="form-control" id="username" name="text" placeholder="comment here"></td>
          <td><button class="btn btn-danger" id="removeBtn">削除</button></td>
        </tr>

        <tr>
          <td><input type="text" class="form-control" id="username" name="text" placeholder="comment here"></td>
          <td><button class="btn btn-danger" id="removeBtn" >削除</button></td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-primary" id="addBtn">追加</button>
  </div>
  
<script>
  // ページの読み込みが完了してから実行されるように$(function(){});を記述
  $(function() {

    $('#addBtn').on('click', function() {

      const HTML = `

        <tr>

          <td><input type="text" class="form-control" id="username" name="text" placeholder="comment here"></td>

          <td><button class="btn btn-danger" id="removeBtn">削除</button></td>

        </tr>

      `

      $('tbody').append(HTML);

    });

    $(document).on('click', '#removeBtn', function() {

      $(this).parents('tr').remove();

    })

  });
</script>
</body>
</html>