jquery动态删除,js动态删除div

JQUERY 如何删除动态添加的元素？

删除可以使用  jQuery 文档操作 - remove() 方法

蒙城网站建设公司创新互联,蒙城网站设计制作，有大型网站制作公司丰富经验。已为蒙城上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的蒙城做网站的公司定做！

定义和用法

remove() 方法移除被选元素，包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

实例

!--移除所有P元素--

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$("button").click(function(){

$("p").remove();

});

});

/script

/head

body

p这是一个段落。/p

p这是另一个段落。/p

button删除所有 p 元素/button

/body

/html

添加元素可以使用  jQuery 文档操作 - append() 方法

定义和用法

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

实例

!--在每个 p 元素结尾插入内容--

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$("button").click(function(){

$("p").append(" bHello world!/b");

});

});

/script

/head

body

pThis is a paragraph./p

pThis is another paragraph./p

button在每个 p 元素的结尾添加内容/button

/body

/html

拓展：jQuery添加元素的方法还有before()、after()、insertAfter() 、insertBefore()、appendTo()、prepend()、prependTo()等等。可以查看jquery官网文档或者W3School的jQuery 参考手册 - 文档操作

如何用jquery实现动态删除表格行

这个问题我需要用一段代码来实现，步骤如下：

1.把相关的标签写上

pre class="html" name="code"!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"/script

script language="javascript" type="text/javascript"

$(document).ready(function (){

$("#submit").click(function (){

2.然后，先获取文本框的值

var $name=$("#name").val();

var $email=$("#email").val();

var $phone=$("#phone").val();

3.创建tr、td并且把内容放入td中

var $tr=$("trtd"+$name+"/tdtd"+$email+"/tdtd"+$phone+"/tdtda href='#' class='lj'DELETE/a/td/tr");

$tr.appendTo("#table");

4.如果在函数内部进行删除，直接使用click即可

$(".lj").click(function (){

5.$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr

$(this).parent().parent().remove();

})

});

/*

6.最后，如果在外部进行删除 ，需要使用live进行删除

$(".lj").live("click",function (){

//删除

$(this).parent().parent().remove();

});

*/

});

/script

/head

body

div style="background-color:#CCC; width:700px; height:500px; margin-left:300px;"

form

p align="center"添加用户：/p/td

姓名:input type="text" id="name" /

email:input type="text" id="email" /

电话:input type="text" id="phone" /br /br /

p align="center"input type="button" id="submit" value="提交" //p br /br /

/form

hr color="#FFFFFF" /br /

table width="600" border="1" id="table" bordercolor="#FFFFFF" align="center"

tr id="top"

td姓名/td

tdemail/td

td电话/td

td删除/td

/trbr /

/table

/div

/body

/html

/prepre class="html" name="code"parent：查找每个段落的父元素/prepre class="html" name="code"live:live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。/prepre class="html" name="code"传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。/prepre class="html" name="code"live应用小例子：body div class="clickme"Click here/div/body/prepre class="html" name="code"可以给这个元素绑定一个简单的click事件：/prepre class="html" name="code" $('.clickme').bind('click', function() { alert("Bound handler called.");});/prepre class="html" name="code"当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。/prepre class="html" name="code" $('body').append('div class="clickme"Another target/div');/prepre class="html" name="code"尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。 /prepre class="html" name="code".live() 就提供了对应这种情况的方法。/prepre class="html" name="code"如果我们是这样绑定click事件的： /prepre class="html" name="code"$('.clickme').live('click', function() { alert("Live handler called."); });然后再添加一个新元素： $('body').append('div class="clickme"Another target/div');/prepre class="html" name="code"然后再点击新增的元素，他依然能够触发事件处理函数。 /prebr

pre/pre

br

以上步骤就能实现动态删除表格行

jquery删除div中动态添加的元素？

jquery 提供了remove() 方法，用来移除被选元素，包括所有文本和子节点。因此只需根据添加的div的id即可将其删除：

$(div_id).remove();

实例演示如下:

HTML结构

input type="button" value="删除"

div id="test"这是示例的DIV/div

jquery代码

$(function(){   $("input[type='button']").click(function() {        $("div#test").remove();   });