js 动态添加删除表单元素

<form id="form" role="form" method="post" class="custom-control">
        <div class="form-inline">
        <label for="details" class="custom-control-label col-md-2">还款明细</label>
        <button type="button" class="button btn-light" id="add-btn" onclick="add_div()">添加明细</button>
        <button type="button" class="button btn-light" id="del-btn" onclick="del_div()">删除明细</button>
    </div>
    <div class="form-group" id="details">
       
	   <div class="form-group" >
	     <label class="form-label">游戏截图:</label>
	   	<input type="text" name="jjkjk" value="888">
	   </div>
	 
    </div>
</form>

<script type="text/javascript">
    var detail_div = 1;
    function add_div() {
        var e = document.getElementById("details");
        var div = document.createElement("div");
        div.className = "form-group";
        div.id = "details" + detail_div;
        div.innerHTML = e.innerHTML;
        document.getElementById("form").appendChild(div);
        detail_div++;
    }

    function del_div() {
        var id = "details" + (detail_div - 1).toString();
        var e = document.getElementById(id);
        document.getElementById("form").removeChild(e);
        detail_div--;
    }
</script>