js动态实现增加删除input框及在input框内添加元素

闲话不多说，直接放代码！喜欢的小伙伴不妨点个赞加个关注哟，您的支持就是给怂怂最大的鼓励呢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<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--;
    }

    function number(){
        var number = document.getElementById("number");
        var value = number.value;
        //如果文本值为空,设置为1
        if (value=="") {
            number.value = 1;
        }
        //如果文本值为非纯数字,设置为1
        //isNaN()是否为非法数字
        if (isNaN(value)) {
            number.value = 1;
        }
        //如果文本值小于1,设置为1
        if (parseInt(value)<=1) {
            number.value = 1;
        }
    }
</script>
<body>
	<form id="form" role="form" method="post" class="formBuilder">
	    <div class="form-inline">
	        <label for="details" >演示</label>
	        <button type="button"  id="add-btn" onclick="add_div()">+</button>&nbsp;&nbsp;&nbsp;
	        <button type="button"  id="del-btn" onclick="del_div()">-</button>
	    </div>
	    <div  id="details">
	        <div class="form-inline">
	            <label for="receivable" >选项</label>
		          	Label：<input  id="receivable" onBlur="number()"  />
		           	value：<input  id="receivable1" onBlur="number()"  />
	        </div>
	    </div>
	</form>
</body>
</html>

代码演示效果，如下：
在这里插入图片描述

小伙伴们，你们学会了吗？如果觉得对你们有所帮助，记得给怂怂右上角点个赞哦！你们的点赞就是我最大的鼓励！谢谢小伙伴们啦！

js动态实现增加删除input框及在input框内添加元素

猜你喜欢