第二十四篇 jQuery 學習6 刪除元素
阿新 • • 發佈：2017-09-25
cli 存在 代碼 size 執行 utf-8 style 指定 消失
jQuery 學習6 刪除元素
上節課我們做了添加元素，模擬的是樓主發的文章，路人評論，那麽同學們這節課學了刪除之後，去之前的代碼上添加一個刪除，模擬一個樓主刪除路人的評論。 jQuery的刪除方法：- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素
<!DOCTYPE html> <html> <head lang="en"> <meta以上，我們在頁面，打開檢查代碼，可以看到，執行shanchu1事件，所有div都被刪除，同學們註意，這裏是刪除，並非隱藏，檢查代碼裏的div也就消失了，而不是添加display屬性隱藏哦。 remove()刪除方法，它還可以帶一個參數，就是過濾條件，在div元素裏過濾，過濾條件是class="div"，所以我們在remove的括號裏，帶一個參數，寫法和前的$("")是一樣的，也就是找到，指定的意思，那麽我們調用shanchu2事件，可以看到，只有第一個和第三個div被刪除，因為過濾條件指向了它們。 shanchu3事件，裏面用的是empty()方法，它也是刪除，但不是刪除此元素，而是刪除此元素下面的所有元素，包括內容。所以我們檢查源碼會發現，三個div依舊存在，不過內容、元素等都被刪除了。 本節課學的刪除操作很簡單，難點在於擴展，就看同學們在實戰中，能否合理運用。charset="UTF-8"> <title>jQuery 學習6 刪除元素</title> <!--使用jQuery一定不要忘記引用jQuery文件--> <script src="../js/jquery-1.12.2.min.js"></script> </head> <body> <div class="div"> 我是第一個div元素 <span>第一個div裏面的span元素</span> </div> <div> 我是第二個div喲 <b>第二個div下面的b元素</b> <span>第二個div下面的span元素</span> </div> <div class="div">我是第三個div</div> <!--以上給出三個div測試效果--> <br/> <!--給三個按鈕事件--> <button onclick="shanchu1()">刪除div</button> <button onclick="shanchu2()">過濾刪除div裏class="div"的</button> <button onclick="shanchu3()">刪除div裏的子元素</button> <script> //shanchu1事件，刪除所有div元素 function shanchu1(){ $("div").remove(); //remove()刪除方法 } //shanchu2事件，刪除div裏，只有class="div" 的元素 function shanchu2(){ $("div").remove(‘.div‘); //只會刪除div元素裏面帶有class並且值等於div的元素 } //shanchu3事件，刪除div裏面的所有子元素 function shanchu3(){ $("div").empty(); //刪除被選元素下的所有子元素(包括內容) } </script> </body> </html>
第二十四篇 jQuery 學習6 刪除元素