jQuery实现动态添加删除输入框

在一个项目中，一个实体需要动态添加另外的实体多个，即在新增或者编辑这个实体的时候，需要动态添加输入框。利用jQuery简单实现了一下，小有成就感。
<%if(isAdd){%>
  <div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 <span  style="color: red;">*</span>sku属性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="" minlength="2" maxlength="32" placeholder="请输入sku属性值名称" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
</div>
  </div>
<%}else{%>
   <!--第一个不能删除，从for中拿出来-->
   <%for(opt in opts!){%>
<%if(optLP.index==1){%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 <span  style="color: red;">*</span>sku属性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="请输入sku属性值名称" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
</div>
</div>
<%}else{%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 sku属性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="请输入sku属性值名称" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">-</button>
</div>
</div>
<%}%>
   <%}%>
<%}%>
<div id="container">
</div>






<script type="text/javascript">
    $(function(){
//动态添加、删除输入框的效果
        $(".addInput").click(function(){
            var $container = $("#container");
            var $newDiv = $("<div class='am-g am-form-group am-margin-top'></div>");
            $newDiv.append($("<div class='am-u-sm-4 am-u-md-2 am-text-right'>sku属性值：</div>"))
                    .append("<div class='am-u-sm-6 am-u-md-6'><input type='text' name='opts' value='' minlength='2' maxlength='32' placeholder='请输入sku属性值名称' required/></div>")
                    .append("<div class='am-u-sm-2 am-u-md-4'><button type='button' class='deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs'>-</button></div>");
            $container.append($newDiv);
            //为新添加的这一行的按钮添加点击事件
            $(".deleteInput").click(function(){
                $(this).parent().parent().remove();
            });
        });
        
        //编辑中本来有的可以删除
        $(".deleteInput").click(function(){
                $(this).parent().parent().remove();
        });
    });
</script>


另外就是逻辑上注意：编辑的时候不仅要准备本实体：回显本实体数据，还需要准备与本实体相关联的这些实体，以循环。然后在添加的时候，将这些数据插入关联的表中，本实体的id肯定是一个字段。
编辑的时候先删除原来本实体相关联的，再插入现在的。