jQuery的DOM操作之刪除節(jié)點(diǎn)示例
如果文檔中某一個(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()方法也可以通過傳遞參數(shù)來選擇性地刪除元素。
<script type="text/javascript"> $(document).ready(function(){ $("ul li").remove("li[title!=apple]"); }); </script>
2. empty():
嚴(yán)格來講,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è)面源碼:
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jQuery DOM操作 基于命令改變頁(yè)面
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jQuery DOM操作小結(jié)與實(shí)例
- jQuery常見面試題之DOM操作詳析
- 淺談jQuery 選擇器和dom操作
- Jquery基礎(chǔ)教程之DOM操作
- 鋒利的jQuery jQuery中的DOM操作
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jQuery DOM操作實(shí)例
- jQuery中DOM常見操作實(shí)例小結(jié)
相關(guān)文章
jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法實(shí)例分析
這篇文章主要介紹了jQueryMobile之窗體長(zhǎng)內(nèi)容的缺陷與解決方法,結(jié)合具體實(shí)例形式分析了jQueryMobile底部懸浮層遮擋情況下的解決方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-09-09簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎(jiǎng)程序
今天小編就為大家分享一篇關(guān)于簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎(jiǎng)程序,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測(cè)試通過,需要的朋友可以參考下2014-07-07jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例,實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端,后端接收json,對(duì)json進(jìn)行處理,后端返回一個(gè)json給前端,有興趣的可以了解一下。2017-03-03jQuery Datatables表頭不對(duì)齊的解決辦法
這篇文章主要為大家詳細(xì)介紹了jQuery Datatables表頭不對(duì)齊的解決辦法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查功能,涉及jQuery針對(duì)網(wǎng)頁(yè)DOM節(jié)點(diǎn)的獲取、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09Jquery 實(shí)現(xiàn)table樣式的設(shè)定
這篇文章主要介紹了Jquery 實(shí)現(xiàn)table樣式的設(shè)定方法的相關(guān)資料,需要的朋友可以參考下2015-01-01jquery操作checked屬性以及disabled屬性的多種方法
這篇文章主要介紹了jquery控制checked屬性以及disabled屬性的多種方法,下面只提到checked,其實(shí)disabled在jquery里的用法和checked是一模一樣的,需要的朋友可以參考下2014-06-06jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07