Javascript 动态增减元素

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 94 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的动态添加或删除文件输入框的方法。通过简单的HTML与JavaScript结合，可以实现在网页上根据用户需求增加或减少文件上传输入框的功能。此方法适用于需要用户上传多个文件的应用场景。

增加一个减少一个

CODE:

 
   <div style="width:270px;height:100px;border:1px solid green" id="one"> 
       <input type="file" style="margin-left:20px;margin-top:3px;" /> 
   </div> 
   <a href="javascript:addControl()" style="margin:5px;font-size:12px">增加一个</a> 
   <a href="javascript:removeControl()" style="margin:5px;font-size:12px">减少一个</a> 
     
     
   <script> 
       var odiv = document.getElementById("one"); 
       function addControl(){ 
           var obj = document.createElement("input"); 
           obj.type="file"; 
           obj.style.marginLeft="20px"; 
           obj.style.marginTop="3px"; 
           odiv.appendChild(obj); 
       } 
     
       function removeControl(){ 
           var count = odiv.getElementsByTagName("input").length; 
           if(count<=1){ 
               alert("不能再删了,至少要保留一个!"); 
           }else{ 
               odiv.removeChild(odiv.lastChild); 
           } 
       } 
   </script> 
  