js刪除執行元素下所有的子元素
本章節介紹一下如何刪除指定元素下的所有子元素,廢話不多說,直接看程式碼。
一.使用innerHTML:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var obt=document.getElementById("bt"); obt.onclick=function(){ obox.innerHTML=""; } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> <input type="button" id="bt" value="檢視效果"/> </body> </html>
以上程式碼可以將div中的所有內容情況的一乾二淨,無論是文字節點還是元素節點,在標準瀏覽器中,空格和換行算是文字節點,有時候我們只想清除元素節點,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); var len=lis.length; var obt=document.getElementById("bt"); var theArray=[]; obt.onclick=function(){ for(var index=0;index<len;index++){ theArray.push(lis[index]); } for(var i=0;i<theArray.length;i++){ obox.removeChild(theArray[i]); } } } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> <input type="button" id="bt" value="檢視效果"/> </body> </html>
相關文章
- js刪除父元素下所有的元素節點程式碼JS
- js如何元素當前元素所有的父元素JS
- 建立元素和刪除元素
- jQuery刪除元素jQuery
- jQuery 刪除元素jQuery
- JS] JS 之刪除陣列中的元素JS陣列
- js刪除陣列指定索引的元素JS陣列索引
- js刪除li元素程式碼例項JS
- HashMap 之元素刪除HashMap
- removeChild()刪除li元素REM
- jQuery獲取某元素下所有的連結元素jQuery
- js刪除陣列中重複的元素JS陣列
- js刪除陣列中的重複元素JS陣列
- js刪除陣列元素中的指定值JS陣列
- STL.vector容器刪除單個元素、部分元素、全部元素
- JavaScript刪除陣列元素JavaScript陣列
- JavaScript 建立和刪除元素JavaScript
- jQuery刪除指定子元素jQuery
- jQuery刪除指定li元素jQuery
- c++ map刪除元素C++
- c++ vector刪除元素C++
- JS刪除陣列裡的某個元素方法JS陣列
- js刪除指定的li元素程式碼例項JS
- JavaScript 刪除陣列指定元素JavaScript陣列
- jQuery如何刪除元素節點jQuery
- jQuery 刪除當前li元素jQuery
- JavaScript 刪除指定的li元素JavaScript
- JavaScript刪除array陣列元素JavaScript陣列
- 刪除零元素
- js刪除陣列重複元素程式碼例項JS陣列
- 將資料存放於html元素或者從html元素刪除HTML
- CSS子元素居中(父元素寬高已知,子元素未知)CSS
- JavaScript 刪除陣列重複元素JavaScript陣列
- JavaScript 動態新增與刪除元素JavaScript
- JavaScript 陣列新增或者刪除元素JavaScript陣列
- jQuery為元素新增和刪除classjQuery
- Remove Duplicate Letters 刪除重複元素REM
- JavaScript陣列刪除重複元素JavaScript陣列