动态添加和删除控件

项目有个功能是要做动态添加责任人，要求以及起至时间。最后的效果如下图：

点击加号按钮就可以添加一行记录，点击删除按钮就可以删除一行。

其实思路很简单，将一行信息用div标签（div1）包住，再添加一个div标签（id设为Div）把所有动态添加的内容包住；当点击加号按钮时，响应js函数，函数的主要任务是获取id为div1的对象，利用clonenode函数复制一份，并添加为id为Div的一个子节点（注意要改一下id，不然都一样就不好区分了）。

jsp代码：

<div class="layui-form-item">
	  	  <div class="layui-btn-group">
  			<button class="layui-btn layui-btn-small" type="button" οnclick="addRow()"><i class="layui-icon"></i></button>
  			<button class="layui-btn layui-btn-small layui-btn-danger" type="button"  οnclick="delRow()"><i class="layui-icon"></i></button>
		  </div>
  	  </div>
  	  
  	  <div class="layui-form-item">
  	  	<div class="layui-inline"  id="clonerow">
	  	  	<div class="layui-input-inline">
	  	  	<select name="city" lay-verify="required">
		        <option value="">选择责任人</option>
		        <option value="0">北京</option>
		        <option value="1">上海</option>
		     </select>
	  	  	</div>
		     <div class="layui-input-inline">
		     <input οnclick="writereq(this)" type="text" lay-verify="required" class="layui-input">
		     </div>
   			<label class="layui-form-label">开始时间</label>
   			<div class="layui-input-inline">
     		<input type="text" class="layui-input" id="start0" lay-verify="required">
   			</div>
    	
   			<label class="layui-form-label">结束时间</label>
   			<div class="layui-input-inline">
     		<input type="text" class="layui-input" id="end0" lay-verify="required">
   			</div>
    		
	    </div>
	  </div>

js代码：

function addRow(){
	i++;
	var obj=document.getElementById("clonerow");
	var clonenode=obj.cloneNode(true);
	clonenode.id="clonerow"+i;
	obj.parentNode.appendChild(clonenode);
	var obj1=document.getElementById("clonerow"+i);
	var objinput=obj1.getElementsByTagName("input");
	objinput[2].id="start"+i;
	objinput[3].id="end"+i;
	console.log($("input#start"+i).attr("lay-key",i*2+3+""));
	console.log($("input#end"+i).attr("lay-key",i*2+4+""));
	
}
function delRow(){
		
	var obj=document.getElementById("clonerow");
	if(obj.parentNode.childNodes.length>3){
		var objlastnode=obj.parentNode.lastChild;
		console.log(objlastnode);
		console.log("del"+i);
		obj.parentNode.removeChild(objlastnode);
		
		console.log(obj.parentNode.childNodes.length);
	}else{
		layer.msg("删除失败");
	}
	
}

说明：里面有很多layui单词，这是我使用的一个前端框架，还不错，你们可以搜一下试试。