画面遷移におけるjavascript

初学者です。
現在、springbootの tymeleafを使用しwebを作成しています。

初歩的なことで申し訳ないのですが、
下記どうしても実現できずに方法をご教示いただけますでしょうか。

■成果物
・フォーム数を追加削除で動的に変更が可能な入力フォーム画面〜登録ページ
・「追加する」で今あるフォームの下に１つずつフォームが追加
・「削除する」でボタンの直ぐ上のフォームのみを削除

※画像のフォーム、上からフォーム①、その下を②とします。

■やりたいこと
入力画面：フォーム①、②の合計2フォームを入力　
↓
「確認画面」へ遷移
↓
確認画面：「戻る」ボタンにて入力フォームへ遷移し、フォーム②を削除　

■起っていること
・「確認画面」⇒「入力画面」へ戻った際、
フォーム①②で１フォームになってしまう

画像のように各フォームの下に「削除する」ボタンがあり、
削除できるようにしたいのですが、遷移してしまうと
フォーム①の下から「削除する」ボタンが消え、
②の下のみに「削除する」「追加する」ボタンがある状態です。

また「追加する」ボタンを押下すると、フォーム①②がまとまってそのまま下に複製されます。
（合計４フォームできてしまいます）

（「確認画面」へ遷移する前は、各フォーム追加・削除できます。）

■教えていただきたいこと
調べたところonUnloadイベントハンドラを使えばよいのかと思ったのですが、
使い方が分からず実践できていないところもあり、
上記実現できる方法を教えていただきたいです。

コードの表示

HTML,Javascript
1<!DOCTYPE html>
2<html>
3
4<form action="demo.html" class="repeater">
5   <div id="myform-block">
6    　 <div id="myform-unit" class="counter">
7         <fieldset class="app"　th:each="myform,stat :${inputmyformList}">
8
9        <legend class="app">フォーム</legend>
10            <div class="form-group">
11        　　　　 <label>あだ名</label><br>
12                 <input type="text" class="form-control array" id="adana"
13                　　th:field="*{inputmyformList[__${stat.index}__].adana}"/>
14        　　　</div>
15
16            <div class="form-group">
17             <label for="lang">血液型</label><br>
18                <input type="text" class="form-control array" id="blood"
19            　　　　th:field="*{inputmyformList[__${stat.index}__].inputblood}"/>
20            </div>
21        </fieldset>
22            
23        <input class="delete-button" type="button" value="削除する" />
24　　　 </div>
25　　</div>
26    　　<br> <input id="add-button" type="button" value="追加する" />
27</form>
28
29
30
31<!--js-->
32<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
33<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
34<script type="text/javascript">
35$(function() {
36
37        var unitIndex = function() {
38            return $('.counter').length - 1; //配列のインデックス番号を実際の数よりー1
39        };
40
41        $('#add-button').click(function() {
42
43        var clonecode = $('.counter:last')　.clone(true); 
44
45        clonecode.appendTo('#myform-block');　//1form追加
46
47        clonecode.find('.array') 
48        .each( 
49                function(i, ele) {　//i=各繰り返し処理で実行したい関数　/ ele =繰り返し処理中の要素を参照
50                    var regex = /^inputmyformList[[0-9]]/;　//入力値チェックの準備
51                    var name = $(ele).attr('name');　　
52                    if (regex.test(name)) { //nameがregexかマッチング
53                        $(ele).attr('name',name.replace(regex,'inputmyformList['+ unitIndex()+ ']'));//IndexNoを書き換える
54                    }
55                });
56
57        //HTMLに追加
58        clonecode.insertAfter($('.counter:last'));
59        });
60
61        //削除
62        $('.delete-button').click(function() {
63
64            //クリックされた削除ボタンの親要素を削除
65            $(this).parents(".counter").remove();
66
67            var scount = 0;
68                //番号振り
69                $('.counter')　.each(function(){
70                    $(this).find('.array')
71                    .each( 
72                    function(i, ele) {　
73
74
75                        var regex = /^inputmyformList[[0-9]]/;　//入力値チェックの準備
76                        var name = $(ele).attr('name');　　
77                        if (regex.test(name)) { 
78                            $(ele).attr('name',name.replace(regex,'inputmyformList['+ scount + ']'));//IndexNoを書き換える
79                        }
80                    });
81                    scount += 1;
82            });
83
84            });
85
86});
87
88</script>
89</html>

行動規範の内容に同意します

回答1件

ベストアンサー

画像のように各フォームの下に「削除する」ボタンがあり、

削除できるようにしたいのですが、遷移してしまうと
フォーム①の下から「削除する」ボタンが消え、
②の下のみに「削除する」「追加する」ボタンがある状態です。

→下のコード内に削除ボタンが含まれていない為、削除ボタンが含まれないのだと思います。

jsp
1  <fieldset class="app" th:each="myform,stat :${inputmyformList}">
2    <legend class="app">フォーム</legend>
3    <div class="form-group">
4      <label>あだ名</label><br>
5      <input type="text" class="form-control array" id="adana" th:field="*{inputmyformList[__${stat.index}__].adana}" />
6    </div>
7    <div class="form-group">
8      <label for="lang">血液型</label><br>
9      <input type="text" class="form-control array" id="blood" th:field="*{inputmyformList[__${stat.index}__].inputblood}" />
10    </div>
11  </fieldset>

また、javascriptで$('.counter:last')と指定しているのであれば、上記コード内で<div id="myform-unit" class="counter">を含めて、.counterをform文作成しないと正常に動作しないでしょう。
(繰り返しなのでidはindexを使用するなどして動的に変える必要があります。)

以下追記、
気になったのですが、$('.counter:last')とすると、全ての.counterを削除した場合、動かなくなりませんか?
実際のコードでは工夫してあるのかもしれませんが、現状提示されたコードを見るとそのバグが起きるので、一応指摘しておきます。

投稿2019/12/10 02:06

編集2019/12/10 02:08