javascript フォームの追加・削除の実装

Question

前提

フォームの追加・削除の機能を実装しています。

• 追加ボタンをクリックすると、フォームが生成される
• 削除ボタンをクリックすると、一番最後のフォームが削除される

実装したいこと

削除ボタンの機能をうまく記述することができません。
アドバイスいただけないでしょうか。
よろしくお願いいたします。

 <div id="form-field"　class="form-field">
  
   <div class="selectbox" id="selectbox_0">
    <select name="assettable[list_id]" >
     <option value="0">選択してください</option>
     <option value="1">現金</option>
    </select> 
   </div>
   
   <input id="input-balance_0"　class="form-control" placeholder="例) 1000" type="text" name="assettable[balance]">
   
  
 </div>
  
 <button id="delete-btn">削除</button>
 <input type="button" value="追加" id="add-btn"> 

var i = 1 ;
var minCount = 0;
var maxCount = 5;

function addForm() {　　　
  //追加ボタンクリック時にイベント発火
  const add = document.getElementById("add-btn");
  add.addEventListener("click", () => {
    //フォーム生成
    const select = document.getElementById("selectbox_0");
    const select_copy = select.cloneNode(true);　　
    select_copy.id = 'selectbox_' + i;　
    const input = document.getElementById("input-balance_0");
    const input_copy = input.cloneNode(true);　　
    input_copy.id = 'input-balance_' + i;　
    input_copy.value = ''
    
    //const delete_btn = document.getElementById("delete-btn_0");
    //const delete_btn_copy = delete_btn.cloneNode(true);　　
    //delete_btn_copy.id = 'delete-btn_' + i;　

    //フォーム追加
    if (i < maxCount) { 
    const parent = document.getElementById('form-field');　
    parent.appendChild(select_copy);
    parent.appendChild(input_copy);
    //parent.appendChild(delete_btn_copy);
    }
 
    i++ ;
	});
 };

//削除ボタンの実装の仕方がわからない
window.addEventListener('load', addForm);

function deleteForm() {
  const d = document.getElementById("delete-btn");
  d.addEventListener("click", () => {
  const d_selectbox = document.getElementsByClassName("selectbox")
  const child = d_selectbox.lastElementChild;
  d_selectbox.removeChild(child);
 	});
 };

Answer 1

解決しました。

<div id="form-field"　class="form-field">
  
   <div class="selectbox" id="selectbox_0">
    <select name="assettable[list_id]" >
     <option value="0">選択してください</option>
     <option value="1">現金</option>
    </select> 
   </div>
   
   <input id="input-balance_0"　class="form-control" placeholder="例) 1000" type="text" name="assettable[balance]">
   <button id="0" onclick="deleteBtn(this)">削除</button>
  
 </div>
  
 <input type="button" value="追加" id="add-btn"> 

var i = 1 ;
var minCount = 0;
var maxCount = 5;

function addForm() {　　　
  //追加ボタンクリック時にイベント発火
  const add = document.getElementById("add-btn");
  add.addEventListener("click", () => {
    //フォーム生成
    const select = document.getElementById("selectbox_0");
    const select_copy = select.cloneNode(true);　　
    select_copy.id = 'selectbox_' + i;　
    const input = document.getElementById("input-balance_0");
    const input_copy = input.cloneNode(true);　　
    input_copy.id = 'input-balance_' + i;　
    input_copy.value = ''
    //フォーム追加
    if (i < maxCount) { 
    const parent = document.getElementById('form-field');　
    parent.appendChild(select_copy);
    parent.appendChild(input_copy);
    }
 
    var button_data = document.createElement('button');
    button_data.id = i;
    button_data.onclick = function(){deleteBtn(this);}
    button_data.innerHTML = '削除';
    
    if (i < maxCount) { 
    const parent = document.getElementById('form-field');　
    var input_area = document.getElementById(select_copy.id);
    parent.appendChild(button_data);
    }
    
    i++ ;
	});
 };


window.addEventListener('load', addForm);


//削除ボタンクリック時に実行される
window.deleteBtn = function(target){
  var target_id = target.id;
  var parent = document.getElementById('form-field');
  var slt_id = document.getElementById('selectbox_' + target_id);
  var ipt_id = document.getElementById('input-balance_' + target_id);
  var tgt_id = document.getElementById(target_id);
   if (target_id > minCount){
  parent.removeChild(slt_id);
  parent.removeChild(ipt_id);
  parent.removeChild(tgt_id);	
  }  
}