我是靠谱客的博主 勤劳招牌,这篇文章主要介绍jQuery实现动态添加和删除一个div,现在分享给大家,希望可以做个参考。

本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效。

代码实例如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div { width:50px; height:50px; background-color:green; font-size:12px; } </style> <script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#father").prepend("<div>脚本之家欢迎您</div>"); }) </script> </head> <body> <div id="father"></div> </body> </html>

以上代码可以在父div中添加一个div,下面再介绍一下如何删除一个div,下面只给出核心代码:

复制代码
1
2
3
4
$(document).ready(function(){ $("#father").prepend("<div>脚本之家欢迎您</div>"); $("div").remove("#father div"); })

以上代码可以移除添加的div。

示例二:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Add And Close Div</title> <script type="text/javascript教程" > $(document).ready(function(){ bindListener(); }) function addimg(){ $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); // 为新元素节点添加事件侦听器 bindListener(); } // 用来绑定事件(使用unbind避免重复绑定) function bindListener(){ $("a[name=rmlink]").unbind().click(function(){ $(this).parent().remove(); }) } </script> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <label>请选择上传的图片</label> <a href="javascript:addimg()" id="addImg">增加图片</a> <div class="mdiv" id="mdiv"> <div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div> </div> <input type="submit" name="submit" value="上传图片" /> </form> </body> </html>

相关阅读:

1.prepend()函数可以参阅jQuery的prepend()方法一章节。

2.remove()函数可以参阅jQuery的remove()方法一章节。

最后

以上就是勤劳招牌最近收集整理的关于jQuery实现动态添加和删除一个div的全部内容,更多相关jQuery实现动态添加和删除一个div内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(150)

评论列表共有 0 条评论

立即
投稿
返回
顶部