JQUERY 如何刪除動態(tài)添加的元素？

刪除可以使用? jQuery 文檔操作 - remove() 方法

蒙城網站建設公司創(chuàng)新互聯(lián),蒙城網站設計制作，有大型網站制作公司豐富經驗。已為蒙城上千提供企業(yè)網站建設服務。企業(yè)網站搭建\成都外貿網站建設公司要多少錢，請找那個售后服務好的蒙城做網站的公司定做！

定義和用法

remove() 方法移除被選元素，包括所有文本和子節(jié)點。

該方法不會把匹配的元素從 jQuery 對象中刪除，因而可以在將來再使用這些匹配的元素。

但除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 數(shù)據。其他的比如綁定的事件、附加的數(shù)據等都會被移除。這一點與 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實現(xiàn)動態(tài)刪除表格行

這個問題我需要用一段代碼來實現(xiàn)，步驟如下：

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.創(chuàng)建tr、td并且把內容放入td中

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

$tr.appendTo("#table");

4.如果在函數(shù)內部進行刪除，直接使用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的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應。/prepre class="html" name="code"傳遞給 .live() 的事件處理函數(shù)不會綁定在元素上，而是把他作為一個特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點上。/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"然后再點擊新增的元素，他依然能夠觸發(fā)事件處理函數(shù)。 /prebr

pre/pre

br

以上步驟就能實現(xiàn)動態(tài)刪除表格行

jquery刪除div中動態(tài)添加的元素？

jquery 提供了remove() 方法，用來移除被選元素，包括所有文本和子節(jié)點。因此只需根據添加的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();?? });