javascript刪除指定子元素程式碼例項
本章節介紹一下如何利用原生javascript實現刪除指定子元素。
大家都知道使用jquery實現此功能更為方便,不過使用原生的javascript也不麻煩,下面做一下介紹。
關於jquery如何實現此功能可以參閱jquery刪除指定子元素程式碼例項一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul li{ width:400px; height:30px; line-height:30px; list-style:none; } </style> <script> window.onload=function(){ var obt=document.getElementById("bt"); var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); obt.onclick=function(){ obox.removeChild(lis[1]); } } </script> </head> <body> <ul id="box"> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的明天。</li> <li>沒有任何人一開始就是高手,必須要努力奮鬥才行。</li> <li>每一天都是新的,要好好的珍惜時間。</li> </ul> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
2.var obt=document.getElementById("bt"),獲取按鈕元素物件。
3.var obox=document.getElementById("box"),獲取id屬性值為box的元素物件。
4.var lis=obox.getElementsByTagName("li"),獲取box元素下的li元素集合。
5.obt.onclick=function(){},為按鈕註冊click事件處理函式。
6.obox.removeChild(lis[1]),刪除父元素的指定子元素。
二.相關閱讀:
1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。
2.onclick事件可以參閱javascript click 事件一章節。
3.removeChild()函式可以參閱javascript removeChild()一章節。
相關文章
- jquery刪除指定子元素程式碼例項jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- JavaScript刪除元素節點程式碼例項JavaScript
- javascript刪除陣列重複元素程式碼例項JavaScript陣列
- javascript按照值刪除陣列元素程式碼例項JavaScript陣列
- javascript刪除陣列中重複元素程式碼例項JavaScript陣列
- jquery刪除指定元素程式碼例項jQuery
- js刪除li元素程式碼例項JS
- jQuery刪除指定子元素jQuery
- javascript刪除所有cookie例項程式碼JavaScriptCookie
- js刪除指定的li元素程式碼例項JS
- javascript刪除字串中空格程式碼例項JavaScript字串
- javascript刪除或者新增option選項例項程式碼JavaScript
- 刪除陣列中的指定元素例項程式碼陣列
- js刪除陣列重複元素程式碼例項JS陣列
- jquery刪除前n個li元素程式碼例項jQuery
- javascript刪除陣列指定值程式碼例項JavaScript陣列
- javascript刪除字串重複字元程式碼例項JavaScript字串字元
- javascript刪除select下拉選單項程式碼例項JavaScript
- 使用jQuery刪除一個元素節點程式碼例項jQuery
- 動態的新增或者刪除指定元素程式碼例項
- html元素的動態新增和刪除程式碼例項HTML
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- jquery獲取指定元素下所有指定子元素的數目程式碼例項jQuery
- javascript刪除指定索引的陣列程式碼例項JavaScript索引陣列
- javascript獲取和刪除指定cookie程式碼例項JavaScriptCookie
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- javascript刪除陣列元素的程式碼JavaScript陣列
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- javascript刪除陣列中所有奇數程式碼例項JavaScript陣列
- javascript獲取指定元素父元素程式碼例項JavaScript
- javascript元素水平運動程式碼例項JavaScript
- javascript動態建立元素程式碼例項JavaScript
- javascript刪除陣列重複元素程式碼JavaScript陣列
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- javascript遍歷陣列元素程式碼例項JavaScript陣列
- javascript元素迴圈插入效果程式碼例項JavaScript