jQuery的DOM操作之刪除節(jié)點(diǎn)示例

更新時(shí)間：2014年01月03日 15:48:34 投稿：whsnow

如果文檔中某一個(gè)元素多余，那么應(yīng)將其刪除。jQuery提供了兩種刪除節(jié)點(diǎn)的方法，remove()方法和empty()方法下面為大家詳細(xì)介紹下

如果文檔中某一個(gè)元素多余，那么應(yīng)將其刪除。jQuery提供了兩種刪除節(jié)點(diǎn)的方法，remove()方法和empty()方法。

1. remove():

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script src="jQuery/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li:eq(1)").remove(); 
}); 
</script> 
</head> 
<body> 
<p title="what kind of fruit do you like best?">你最喜歡的水果是?</p> 
<ul> 
<li title="apple">蘋果</li> 
<li title="orange">橘子</li> 
<li title="banana">香蕉</li> 
</ul> 
</body> 
</html>

當(dāng)某個(gè)節(jié)點(diǎn)用remove方法刪除后，該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除。這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用。

另外remove()方法也可以通過(guò)傳遞參數(shù)來(lái)選擇性地刪除元素。

<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li").remove("li[title!=apple]"); 
}); 
</script>

2. empty():

嚴(yán)格來(lái)講，empty方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)，它能清空元素中的所有后代節(jié)點(diǎn)。

<script type="text/javascript"> 
$(document).ready(function(){ 
$("ul li:eq(1)").empty(); 
}); 
</script>

此時(shí)查看頁(yè)面源碼：

您可能感興趣的文章:

相關(guān)文章

Jquery知識(shí)點(diǎn)二 jquery下對(duì)數(shù)組的操作
眾所周知，Jquery是對(duì)JavaScript的一種高效的封裝，所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組，在JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作，而在Jquery中則使用$.map()、$.each()來(lái)操作數(shù)組
2011-01-01
根據(jù)Bootstrap Paginator改寫的js分頁(yè)插件
本文主要對(duì)根據(jù)Bootstrap Paginator改寫的js插件進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
jQuery實(shí)現(xiàn)html雙向綁定功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)html雙向綁定功能,涉及jQuery針對(duì)HTML頁(yè)面元素事件綁定相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例，需要的朋友可以參考下
2015-12-12
修改UA在PC中訪問只能在微信中打開的鏈接方法
下面小編就為大家分享一篇修改UA在PC中訪問只能在微信中打開的鏈接方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
jQuery事件委托代碼實(shí)踐詳解
這篇文章主要介紹了jQuery事件委托代碼實(shí)踐詳解，事件委托是利用事件冒泡，只指定一個(gè)事件處理程序來(lái)管理某一類型的所有事件。,需要的朋友可以參考下
2019-06-06
jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果,涉及jQuery響應(yīng)下拉滾動(dòng)事件動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下
2015-12-12
jQuery ajax 路由和過(guò)濾器使用說(shuō)明
好的web api應(yīng)該在url里面有足夠的信息，并且每個(gè)資源方法有它對(duì)應(yīng)的url。
2011-08-08
Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
這是數(shù)月前的事情了，場(chǎng)景是這樣的：在進(jìn)行圖片上傳的時(shí)，我發(fā)現(xiàn)開發(fā)人員使用的上傳圖片方式是Iframe + 傳統(tǒng)的 http post 來(lái)處理的。
2010-11-11
Jquery attr()方法屬性賦值和屬性獲取詳解
下面小編就為大家?guī)?lái)一篇Jquery attr()方法屬性賦值和屬性獲取詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04