本文主要给大家简单介绍一下如何动态的在一个元素添加和删除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>100素材网</div>");

})

</script>

</head>

<body>

<div id="father"></div>

</body>

</html>

　　

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

$(document).ready(function(){

 $("#father").prepend("<div>100素材网</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>

　　

jQuery实现动态添加和删除一个div的更多相关文章

  1. 如何动态添加和删除一个div

    代码实例如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta ...

  2. jQuery如何动态添加具有删除按钮的行

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  3. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  4. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  5. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  6. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  7. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  8. angular.element 动态添加和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  9. jQuery获取动态添加的元素，live和on的区别

    今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...

随机推荐

  1. spring配置定时器的时间设置

    时间大小由小到大排列,从秒开始,顺序为 秒,分,时,天,月,年    *为任意 ?为无限制. 具体如下: "0/10 * * * * ?" 每10秒触发 "0 0 12 ...

  2. context.Request.Files为NULL问题

    在实现图片上传功能的时候出现在ashx等处理页面出现context.Request.Files为NULL异常,有几点需要注意: 1.在客户端可以将form用submit提交,如下: <%@ Pa ...

  3. 在asp.net 中应用POST传递和接收XML文件以及参数.(转)

    使用POST方式可以向别的页面发送请求,并获取返回结果. 可以从一个页面发送POST到另一个页面,也可以在winform工程中使用HTTPRequest发送POST到一个页面.我们拿ASP.NET的a ...

  4. 彻底删除mysql服务

    http://wenku.baidu.com/link?url=XEOFkNXElJV6FoBDOs7m7BlDUv9-ZuLbRbeVwbMa7AXa8ukZ6oIpiYYy3gNnITmP911M ...

  5. IOS学习之路-- 指针&宏函数

    如果*p被()包住,说明指针变量p将来指向的是函数 //声明一个指针变量 //int (*p)(int, int) = sum; int (*p)(int, int); p = sum; // 如果* ...

  6. c# .NET 进行数据库备份和还原

    本文主要内容来源stswordman的介绍,开发环境为10,数据库为08R2 原文地址http://www.cnblogs.com/stswordman/archive/2006/08/06/4690 ...

  7. MySQL游标学习总结

    游标的概念 在数据库中,游标是一个十分重要的概念.游标提供了一种对从表中检索出的数据进行操作的灵活手段,就本质而言,游标实际上是一种能从包括多条数据记录的结果集中每次提取一条记录的机制.游标总是与一条 ...

  8. x86_64平台编译链接汇编程序

    assemble: nasm -f elf32 sample.asm -l sample.lst link: ld -m elf_i386 -o test sample.o io.o

  9. CPPUTest 单元测试框架(针对 C 单元测试的使用说明)

    CPPUTest 虽然名称上看起来是 C++ 的单元测试框架, 其实它也是支持测试 C 代码的. 本文主要介绍用CPPUTest来测试 C 代码. (C++没用过, 平时主要用的是C) C++相关的内 ...

  10. Android popupwindow 弹出的位置问题

    在Android开发中,需要用到PopupWindow这个类.在初始化完成,显示之前,都需要获得这个对象的width,height去计算popupWindow弹出的位置. 这个时候会发现取得的widt ...