js动态创建多个input框带删除按钮

最新推荐文章于 2022-02-13 22:06:12 发布

ruoxuan25

最新推荐文章于 2022-02-13 22:06:12 发布

阅读量4.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ruoxuan25/article/details/47087845

版权

<span style="font-size:24px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">

function addInput(){
	var propstr = "高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm";
	var status = "1";
	
	var ary = propstr.split("|");
	var content = "";
	for(i=0;i<ary.length;i++){
		var obj = document.getElementById("add");
		var inputFile = document.createElement("input");
		
		var inputId = "input_"+i;
		var deleteId = "delete_"+i;
		
		inputFile.setAttribute("type","text");
		inputFile.setAttribute("name","prop");
		inputFile.setAttribute("value",ary[i]);
		inputFile.setAttribute("id",inputId);
		//查看状态时设置input框只读
		if("0"==status){
			inputFile.readOnly = true;
			var p = document.createElement("p");
			obj.appendChild(inputFile);
			obj.appendChild(p);
		}else if("1"==status){
			var del = document.createElement("input");  
		    del.setAttribute("type","button");  
		    del.setAttribute("value","删除"); 
		    del.setAttribute("id",deleteId);
		    
		    var p = document.createElement("p");
		    
			obj.appendChild(inputFile);
			obj.appendChild(del);
			obj.appendChild(p);
		    
		     del.onclick = function(){  //绑定事件，传递当前对象					        
		    	 deleteInput(this);
		     }   
		}
	}
}



function deleteInput(obj) {
	var id = obj.id;
	var count = id.charAt(id.length - 1);
	var deleteObj = document.getElementById(id);
	var inputObj = document.getElementById("input_"+count);
	var parentObj = document.getElementById("add");
	parentObj.removeChild(deleteObj);
	parentObj.removeChild(inputObj);
}
</script>
<body οnlοad="addInput();">
	<div id="add"></div>
</body>
</html></span>