jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<html> <head> <meta charset="utf-8"> <title></title> <style> ul { list-style: none; } li { line-height: 25px; margin-top: 3px; } li:hover { background-color: #ddd; } li.hover { background-color: #fc0; } </style> <script src="./jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(function() { //獲取每一個(gè)li節(jié)點(diǎn)并設(shè)置點(diǎn)擊事件 $("li").click(function() { //當(dāng)點(diǎn)擊某一個(gè)節(jié)點(diǎn)的時(shí)候,增加類(lèi)名為hover $(this).toggleClass("hover"); }); //獲取刪除按鈕并設(shè)置點(diǎn)擊事件 $("button").click(function() { //將類(lèi)名是hover的節(jié)點(diǎn)刪除 $("li.hover").remove(); }); }); </script> </head> <body> <h2 id="hid">jQuery實(shí)例--節(jié)點(diǎn)刪除</h2> <ul> <li>asdfasdfasfd</li> <li>asdfasdfasfd</li> <li>asdfasdfasfd</li> <li>asdfasdfasfd</li> <li>asdfasdfasfd</li> <li>asdfasdfasfd</li> </ul> <button>刪除</button> </body> </html>
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery實(shí)現(xiàn)字符串全部替換的方法
- 解決同一頁(yè)面中兩個(gè)iframe互相調(diào)用jquery,js函數(shù)的方法
- 詳解jQuery中的事件
- 利用JQuery阻止事件冒泡
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- 淺談jquery之on()綁定事件和off()解除綁定事件
- 通過(guò)jquery實(shí)現(xiàn)頁(yè)面的動(dòng)畫(huà)效果(實(shí)例代碼)
- JQuery實(shí)現(xiàn)DIV其他動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例
- 利用jQuery的動(dòng)畫(huà)函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例
- jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫(huà)
- asp.net創(chuàng)建事務(wù)的方法
相關(guān)文章
用jQuery實(shí)現(xiàn)檢測(cè)瀏覽器及版本的腳本代碼
2008-01-01input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點(diǎn)時(shí)隱藏或顯示文字,這樣的焦點(diǎn)效果想必很多朋友在填寫(xiě)form表格的時(shí)候都曾見(jiàn)識(shí)過(guò)吧,本文使用jquery實(shí)現(xiàn)以下,感興趣的朋友可以參考下哈2013-04-04jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開(kāi)始學(xué)jquery,想實(shí)現(xiàn)類(lèi)似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08jquery中cookie用法實(shí)例詳解(獲取,存儲(chǔ),刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲(chǔ),刪除等操作,并附帶了Jquery操作Cookie記錄用戶(hù)查詢(xún)過(guò)信息實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01jquery $(document).ready() 與window.onload的區(qū)別
Jquery中$(document).ready()的作用類(lèi)似于傳統(tǒng)JavaScript中的window.onload方法,不過(guò)與window.onload方法還是有區(qū)別的。2009-12-12jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能,結(jié)合實(shí)例形式分析了jQuery不同版本處理鼠標(biāo)事件響應(yīng)與觸發(fā)相關(guān)操作技巧,需要的朋友可以參考下2018-09-09基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化
前面文章說(shuō)過(guò)下次會(huì)給大家介紹詳細(xì)的基于web Services的JqueryAjax調(diào)用如何把一個(gè)datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶(hù)端再通過(guò)json2.js轉(zhuǎn)化成javascript對(duì)象。2009-08-08基于JQuery實(shí)現(xiàn)的跑馬燈效果(文字無(wú)縫向上翻動(dòng))
本篇文章分享了如何實(shí)現(xiàn)文字無(wú)縫向上翻動(dòng)效果的示例代碼。代碼清晰明了,可直接下載使用。有興趣的朋友可以看下2016-12-12