jQueryを使って動的に入力フィールドを追加・削除する

今回は、jQueryを使って入力フィールドを動的に追加・削除する方法についてご紹介します。

この処理では、以下の複数の関数を使用することになります。

click()メソッド：

click()は、jQueryに内蔵されたメソッドで、クリックイベントが発生したときに、クリックイベントを開始したり、渡された関数を実行したりします。

Syntax: $(selector).click(function);

クリックイベントが発生したときに実行される、オプションのパラメータ “function “を受け取ります。
選択された要素に、指定された機能を実行したものを返します。

append()メソッド：

append()メソッドは、選択された要素の末尾に指定された内容を挿入する。

Syntax: $(selector).append(content)

パラメータとしてコンテンツを受け取ります。パラメータにはHTMLタグを使用することができます。

Remove()メソッド：

選択されている要素を削除します。

Syntax: $(selector).remove();

Parent()メソッド：

選択された要素の直接の親要素を取得します。

Syntax: $(selector).parent();

まず、入力フィールドを含むHTMLコードを作成します。この例では、テキストボックスを追加するための「追加」ボタンと、最後のテキストボックスを削除するための「削除」ボタンも用意します。

<div id="input_fields">
  <div class="input_field">
    <input type="text" name="field_name[]">
    <button class="remove_field">削除</button>
  </div>
</div>
<button id="add_field">追加</button>

上記の例では、input_fieldsというIDを持つ<div>タグの中に、最初のテキストボックスと削除ボタンが含まれる<div>タグが1つあります。

テキストボックスには、name属性に[]が付いています。これにより、フォーム送信時に、この名前を持つすべての値が配列として送信されます。

$(document).ready(function() {
  var max_fields = 10; 
  var wrapper = $("#input_fields"); 
  var add_button = $("#add_field"); 

  var x = 1; 
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div class="input_field"><input type="text" name="field_name[]"/><button class="remove_field">削除</button></div>'); 
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--; 
  });
});

最後に、CSSを使用して、Webレイアウトに応じたスタイリングをページに追加します。