JQuery：項目の追加・削除について

Question

はじめまして。
JQueryを使用しボタンを押下した際の処理を書いているのですが、
上手く動作しないので分かる方がいればご教授頂けますか。

●処理内容
・初期状態では「備考」エリアは１つ表示されている
・項目を追加を押下すると「タイトル」と「内容」を含んだ「備考」エリアが追加される
・「備考」エリアが追加されるたびにタイトルの末尾は連番で振られる
・削除を押すと該当の「備考」エリアが削除される

●困っていること
「備考」エリアを３つ以上に増やし
２番目の「備考」エリアを削除すると、

タイトルが「備考3」のままになる、
inputのnameの末尾が3のままになる。
希望としてはタイトルやnameは連番にしたいのですが方法が分からないのでご教授頂けますか。

<script>
jQuery(document).ready(function($) {
  var prefix_order_list = 'order_list_'; // 品目入力欄のname属性の接頭辞

	// "品目の追加"ボタンを押した場合の処理
	$('#btn_add').click(function(){
		// 品目入力欄を追加
		var len_list = $('#order_list > div.list').length+1;

        // alert(len_list);

		var new_list = '<div class="list"><h3 class="tit03 col-xs-9 col-sm-10">' + '追加記述' + len_list + '</h3>';
            new_list += '<div class="col-xs-3 col-sm-2 button_del"></div>';
            new_list += '<div class="form-group col-xs-12">';
            new_list += '<label for="exampleInputName16" class="">タイトル</label>';
            new_list += '<input type="text" class="form-control " id="' + 'addtit' + len_list + '" placeholder="" name="'+ 'addtit' + len_list + '" >';
            new_list += '</div>';
            new_list += '<div class="form-group col-xs-12">';
            new_list += '<label for="'+ 'addcont' + len_list +'" class="">'+ '内容' +'</label>';
            new_list += '<textarea class="form-control " rows="3" id="' + 'addcontent' + len_list + '"' + 'name="' + 'addcontent' + len_list + '"></textarea>';
            new_list += '</div>';
            new_list += '</div>';

        $('#order_list').append(new_list);

		// 削除ボタンの一旦全消去し、配置し直す
		$('#order_list button').remove();
		len_list++;
        // alert(len_list);
        
		for (var i = 0; i < len_list; i++) {
             var new_btn = '<button type="button" class="btn btn-danger btn-block">削除</button>';

             $('#order_list > div .button_del').eq(i).append(new_btn);
		}
	});

	// 削除ボタンを押した場合の処理
	$(document).on('click', '#order_list button', function(ev) {
		// 品目入力欄を削除
		var idx = $(ev.target).parent().index();
		$('#order_list > div.list').eq(idx).remove();

		var len_list = $('#order_list > div.list').length;

		// 入力欄がひとつになるなら、削除ボタンは不要なので消去
		if (len_list == 1) $('#order_list button').remove();

		// 入力欄の番号を振り直す
		for (var i=0; i<len_list; i++) {
			$('#order_list > div.list').eq(i).children('button').attr('name', prefix_order_list + i);
			$('#order_list > div.list').eq(i).children('input[type="text"]').attr('name', prefix_order_list + i);
		}
	});
});
</script>

<form class="form-inline">
                <div class="row" id="order_list">
                    
                    <div class="list">
                        <h3 class="tit03
                                    col-xs-9
                                    col-sm-10
                                    ">備考1</h3>
                      

                        <div class="form-group col-xs-12">
                            <label for="addtit1" class="">タイトル</label>
                            <input type="text" class="form-control" id="addtit1" name ="addtit1" placeholder="">

                        </div>

                        <div class="form-group col-xs-12">
                            <label for="addcont1" class="">内容</label>
                            <textarea class="form-control " rows="3" id="addcontent1" name="addcontent1"></textarea>
                        </div>
                    </div>

                </div>




                <div class="row">

                    <div class="col-xs-12
                                col-sm-10
                                col-sm-offset-1
                                ">
                        <div class="row">

                            <div class="col-xs-12
                                    col-sm-6
                                    margin_b20
                                    ">
                                <button type="button" id="btn_add" class="btn btn-primary btn-lg btn-block">項目を追加</button>
                            </div>



                        </div>

                    </div>
            </form>

Answer 1

$().children()は直下の子要素しか拾えないのでおそらくそこだと思います。

.children(*)

を

.find(*)

にかえてみてはどうでしょう。

ただこの場合i=0のとき存在しないノードを探しに行くのであまりおすすめできません。
→回避するにはiのオリジンナンバーを0ではなく1にするなどしてください。

あとは、他のかたの回答にもありますが同様の方法はいろいろあるのでぜひいろいろ検討してみてください。
個人的にデータバインディングはVueJSがおすすめです（学習コスト低いので）。

Comments

[Neko_doshi]

あ、あと、タイトルはそもそも書き換える処理がなかったので割愛しております。
同様の手順でできるはずです。

[onobeka]

なるほど！
ただ、findに変更しても上手いこといかないんですよね。。。

[Neko_doshi]

うーん・・・？
試してみたらうまくいっているように見えますが・・・
↓タイトルをiで置換している処理を加えています。

https://jsfiddle.net/w2y2jvpL/

Answer 2

CSSで処理するとか、追加記述部分を取得して番号を振りなおすとかではないでしょうか。

【CSS カウンタの利用 - ウェブデベロッパーガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

【CSS3で要素のカウントが出来るんだ・・・「counter-increment」がランキング作るのに便利 | わぃおがわ】
https://yogawa.com/post-4937

Comments

[onobeka]

ありがとうございます！
参考にさせていただきます＾＾