フォームの入力欄を動的に追加する

はじめに

独学でプログラミングを学習中の大学3年生です。
今回が初投稿になります。

フォームの値を配列で受け取るときに入力欄を動的に追加したいことがあったので、
調べてまとめてみました。
初学者にも分かりやすいように、できるだけ簡潔なコードになるよう心がけています。

CodePen

以下のページで動作を確認できます。
コードも見やすいかもしれません。
https://codepen.io/yuji-207/pen/OJNMYgv

コード

form.html

<form action="" method="">
    <input type="text" name="text[]" class="text"></input>
    <button type="button" class="btn-clone">clone</button>
    <button type="button" class="btn-remove">remove</button>
    <button type="submit"></button>
</form>

バックエンドで配列textとしてデータを受け取れます。

stylesheet.css

input, button {
    display: block;
}

.btn-remove {
    display: none;
}

入力欄の削除ボタンはデフォルトで非表示にしておきます。

script.js

$(function() {

    // button
    var btn_clone = $('.btn-clone');  // 追加ボタン
    var btn_remove = $('.btn-remove');  // 削除ボタン

    // clone
    btn_clone.click(function() {

        var text = $('.text').last();  // 最後尾にあるinput

        text
          .clone()  // クローン
          .val('')  // valueもクローンされるので削除する
          .insertAfter(text);  // inputを最後尾に追加

        if ($('.text').length >= 2) {
            $(btn_remove).show();  // inputが2つ以上あるときに削除ボタンを表示
        }

    });

    // remove
    btn_remove.click(function() {

        $('.text').last().remove();

        if ($('.text').length < 2) {
            btn_remove.hide();  // inputが2つ未満のときに削除ボタンを非表示
        }

    });
});

入力欄が2つ以上あるときだけ、削除ボタンを表示させます。

ハマったこと

初歩の初歩で少しだけハマりました。
ここでハマる人はあまりいないと思いますが、一応…

script.js

var len = $('.text').length

このような入力欄の数を数える変数を1行目とかで宣言してしまうと、
（当たり前ですが）入力欄を増やしたとしても、lenは増えません。

参考

参考にさせていただきました。ありがとうございます。
https://qiita.com/SiskAra/items/5f4bc7ee4e598b863add