动态添加和删除控件

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

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

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

jsp代码：

	  	  

  			
  			
		  
  	  
  	  
  	  

  	  	

	  	  	

	  	  	
		        选择责任人
		        北京
		        上海
		     
	  	  	
		     

		     
		     
   			开始时间
   			

     		
   			
    	
   			结束时间
   			

     		
   			
    		
	    
	  

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单词，这是我使用的一个前端框架，还不错，你们可以搜一下试试。