Tips:点此可运行HTML源码

jQurey动态添加/删除DIV（原创自Zjmainstay）

canrun

复制代码
<html>
<head>
<script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var num = 1;
$(document).ready(function(){
    $("#add").click(function(){
        $("#new").append('<div id="new_sub'+num+'" class="sub"><span>new_sub'+num+'&nbsp;&nbsp;</span><span class="del">&nbsp;X&nbsp;</span></div>');
        $(".del").click(function(){
            $(this).parent().remove();
        });
        num++;
    });
});
</script>
<style type="text/css">
#add {background:#abc;width:15%;text-align:center;cursor:pointer;}
.new_sub_c{background:#dde;}
.del {color:red;border:1px solid yellow;float: right;cursor:pointer;}
.sub {border: 1px solid #AABBCC;height: 90px;width: 150px;}
</style>
</head>
<body>
    <div id="add"><u>Click to Add a DIV</u></div>
    <div id="new"></div>
</body>
</html>

<!-- 摘要效果 -->
<!--
<div id="add" onclick='var num=!$("#new").val()|$("#new").val()
    $("#new").append("<div class=\"sub\"><span>new_sub"+num+"</span><span class=\"del\">X</span></div>")
    $(".del").click(function(){
        $(this).parent().remove()
    });num++;$("#new").val(num)'>Click it</div>
<div id="new"></div>
<style>.sub{border:1px solid #abc;width:29.2%;height:90px}.del{padding:0 4px;text-indent:0;color:red;float:right;background:#EBEBEB}#add{background:#abc;width:29.5%;text-align:center;text-indent:0}</style>
-->
复制代码

 

posted @   Zjmainstay  阅读(619)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手