时间:2021-05-26
本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效。
代码实例如下:
<!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,下面只给出核心代码:
$(document).ready(function(){ $("#father").prepend("<div>欢迎您</div>"); $("div").remove("#father div");})以上代码可以移除添加的div。
示例二:
<!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()方法一章节。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子下面是实现的样子,当然没有样式:点击添加按钮可以添加一行:点击删除可以删除本行:基本功能
JQuery实现动态操作table行,供大家参考,具体内容如下实现效果:可动态实现table添加行和删除行,如下图。代码如下:Html动态Tabletable{
要实现的功能类似下图,动态添加或者删除div点击增加可添加一条div点击删除可删除一条divHTML代码如下:(省略CSS样式代码了大笑)授权给:所有人已认证的
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下:昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQ
本文实例讲述了JQuery实现动态添加删除评论的方法。分享给大家供大家参考。具体实现方法如下: