jQueryでHTMLの要素を動的に追加する。

コンピュータ

JavaScript

2021.10.16

項目数が可変の入力フォームを作成する必要があり、jQueryをつかって要素を動的に追加するコードを試作してみました。
追加ボタンをおすと入力項目が追加され、削除ボタンを押すと項目が一つ削除されます。
入力項目の値が変更されるとalertで、どの入力項目が変化したかメッセージが表示されます。

ソースコード抜粋

<script>
            $(function(){                
                $("#btnAdd").val("追加").on('click', function() {

                    // 要素数
                    var n = $(".hoge").length + 1;

                    // 追加する要素文字列
                    var dom = "<div class='hoge' id='hoge-" + n + "'>" + n + ".";
                        dom += "<input type='text' id='hoge-in-" + n + "' onChange='changeInput(this)'/>";
                        dom += "</div>";

                    // 要素を追加
                    $("#dvContentArea").append(dom);
                });

                $("#btnDel").val("削除").on('click', function() {

                    // 要素数
                    var n = $(".hoge").length;

                    // 要素数が0の場合戻る
                    if (n <= 0) return;
                    
                    // 要素の削除
                    $(`#hoge-${n}`).remove();
                });
            });
            function changeInput(d){
                alert("id:" + d.id + "の値が" + $(d).val() + "に変更された。");
            }
        </script>
        <input type='button' id='btnAdd'/>
        <input type='button' id='btnDel'/>
        <div id='dvContentArea'></div>

コメント