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

最新推荐文章于 2023-07-19 14:15:35 发布

bug菌¹

最新推荐文章于 2023-07-19 14:15:35 发布

阅读量1.7w

点赞数 10

文章标签：动态添加div框

本文链接：https://blog.csdn.net/weixin_43970743/article/details/88125790

版权

《Web实战开发》专栏收录该内容

12 篇文章 5 订阅

订阅专栏

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

<!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() {
      if(detail_div >1){
            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>

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