動的に増減する入力フォームを作成したのですが、[追加]→[削除]→[追加]とすると
採番する際に順番が崩れてしまいます。記述方法などご教示いただけないでしょうか?
よろしくお願いいたします。
javascript
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>入力項目を動的に追加・削除</title> 6<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript"> 8$(function() { 9 //追加 10 $('.addformbox').click(function() { 11 //クローンを変数に格納 12 var clonecode = $('.box:last').clone(true); 13 14 //数字を+1し変数に格納 15 var cloneno = clonecode.attr('data-formno'); 16 var cloneno2 = parseInt(cloneno) + 1; 17 var cloneno3 = parseInt(cloneno) + 3; 18 19 //data属性の数字を+1 20 clonecode.attr('data-formno',cloneno2); 21 22 //数値 23 clonecode.find('.no').html(cloneno3); 24 25 //数値 26 var namecode2 = clonecode.find('input.toiawase').attr('name'); 27 namecode2 = namecode2.replace(/textarea[[2-9]{1,2}/g,'textarea[' + cloneno2); 28 clonecode.find('input.toiawase').attr('name',namecode2); 29 30 //HTMLに追加 31 clonecode.insertAfter($('.box:last')); 32 }); 33 34 35 //削除 36 $('.deletformbox').click(function() { 37 //クリックされた削除ボタンの親要素を削除 38 $(this).parents(".box").remove(); 39 40 var scount = 1; 41 //番号振り直し 42 $('.box').each(function(){ 43 var scount2 = scount + 1; 44 45 //data属性の数字 46 $(this).attr('data-formno',scount); 47 48 $('.no',this).html(scount2); 49 50 51 var name2 = $('input.toiawase',this).attr('name'); 52 name2 = name2.replace(/textarea[[2-9]{1,2}/g,'textarea[' + scount); 53 $('input.toiawase',this).attr('name',name2); 54 55 scount += 1; 56 }); 57 }); 58 59}); 60</script> 61</head> 62 63<style type="text/css"> 64 65#input_plural input.form-control { 66 display: inline-block; 67 width: 65%; 68 height: 34px; 69 padding: 6px 12px; 70 font-size: 14px; 71 color: #555; 72} 73 74#input_plural { 75 margin: 10px 0; 76} 77 78#input_plural input.form-control { 79 display: inline-block; 80 width: 65%; 81 height: 34px; 82 padding: 6px 12px; 83 font-size: 14px; 84 color: #555; 85} 86 87#input_plural input.pluralBtn { 88 width: 30px; 89 height: 30px; 90 border: 1px solid #ccc; 91 background: #fff; 92 border-radius: 5px; 93 padding: 0; 94 margin: 0; 95} 96</style> 97 98 99<body> 100 <div>1</div> 101 <input type="text" name="textarea[0]" class="toiawase" placeholder="選択肢を入力"> 102 <div class="box" data-formno="0"> 103 <div id="input_pluralBox"> 104 <div id="input_plural"> 105 <div class="no">2</div> 106 <input type="text" name="textarea[1]" class="toiawase" placeholder="選択肢を入力"> 107 <input type="button" value="-" class="deletformbox"> 108 <input type="button" value="+" class="addformbox"> 109 </div> 110 </div> 111 </div> 112 </body> 113</html>
回答2件
あなたの回答
tips
プレビュー