首页 > Javascript

jQuery实现动态添加和删除input框代码实例

篇文章主要介绍了jQuery实现动态添加和删除input框,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项</title>
  
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  
<script>
    $(function(){
        // 添加选项
        $("#opbtn").click(function(){
            if($("#opts>li").size() < 6){// 最多添加6个选项
                $("#opts").append("<li><input /></li>");
            }else{// 提示选项个数已经达到最大
                $("#optips").html("选项个数已经达到最大,不能再添加!");
                $("#optips").css({"color":"red"});
            }
             
        });
         
        // 删除选项
        $("#delbtn").click(function(){
            if($("#opts>li").size() <= 0){
                $("#optips").html("已经没有选项可以删除了!");
                $("#optips").css({"color":"red"});
            } else{
                // 删除选项,每次删除最后一个
                $("#opts>li").last().remove();
            }
             
        });
         
         
         
    });
  
</script>
  
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
     
    #dv{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 0px auto 0px;
    }
     
</style>
</head>
<body>
    <div style="margin: 50px;">
        <input id="opbtn" type="button" value="添加选项"/>
        <input id="delbtn" type="button" value="删除选项"/>
        <input id="wrapbtn" type="button" value="包围DIV"/>
        <ol id="opts" type="A"></ol>
         
        <!-- 提示语 -->
        <span id="optips"></span>
    </div>
     
     
</body>
</html>


本文由用户 【联合国】 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。

转载本站原创文章,请注明出处,并保留原始链接、图片水印。

本站是一个以用户分享为主的开源技术平台,欢迎各类分享!

本文地址:http://www.mj85.com/javascript/158.html

分享:

评论 [共0条评论]

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

您现面为匿名用户,暂不能发表评论。如想评论则请登录注册

相关内容

发布者

联合国 发于:

19年/05月/07日 15时

查看次数: 555

标签 Tags

Jquery

input框

谁收藏了?

0人已收藏