javascriptでフォームを追加するボタンを作成しました。
現在は下に追加されるが、これを右に追加され、画面の端までいったら改行しまた右並びで追加されるような仕様にしたいです。
ご教示頂けると助かります。
html
1<div id="form_area"> 2 <input type="text" id="inputform_0" placeholder="フォーム-0"> 3 <button id="0" onclick="deleteBtn(this)">削除</button> 4</div> 5<input type="button" value="フォーム追加" onclick="addForm()">
css
1input { 2 display: block; 3 margin-top: 10px; 4} 5#form_area input { 6 display: flex; 7 flex-direction: column; 8 }
javascript
1var i = 1 ; 2function addForm() { 3var input_data = document.createElement('input'); 4 input_data.type = 'text'; 5 input_data.id = 'inputform_' + i; 6 input_data.placeholder = 'フォーム-' + i; 7 var parent = document.getElementById('form_area'); 8 parent.appendChild(input_data); 9 10 var button_data = document.createElement('button'); 11 button_data.id = i; 12 button_data.onclick = function(){deleteBtn(this);} 13 button_data.innerHTML = '削除'; 14 var input_area = document.getElementById(input_data.id); 15 parent.appendChild(button_data); 16 17 i++ ; 18} 19function deleteBtn(target) { 20 var target_id = target.id; 21 var parent = document.getElementById('form_area'); 22 var ipt_id = document.getElementById('inputform_' + target_id); 23 var tgt_id = document.getElementById(target_id); 24 parent.removeChild(ipt_id); 25 parent.removeChild(tgt_id); 26}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/18 00:53