js刪除操作時confirm()彈出確認框程式碼例項
通常在進行刪除操作的時候,會彈出一個確認框,以防止出現誤操作,下面就通過一個程式碼例項介紹一下javascript自帶的confirm確認框的使用,希望能夠給需要的朋友帶來幫助。程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box li{ width:300px; height:25px; font-size:12px; list-style:none; } </style> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var obt=document.getElementById("bt"); var cks=obox.getElementsByTagName("input"); obt.onclick=function(){ if(confirm("確定要刪除?")){ for(var index=0;index<cks.length;index++){ if(cks[index].checked==true){ obox.removeChild(cks[index].parentNode); index=0 } } } } } </script> </head> <body> <ul id="box"> <li><input type="checkbox"/>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來。</li> <li><input type="checkbox"/>沒有人一開始就是高手,必須要通過努力。</li> <li><input type="checkbox"/>分享的精神和互助的胸懷是進步最大的源動力。</li> <li><input type="checkbox"/>每一天都是新的,請好好珍惜當前的事件。</li> </ul> <input type="button" id="bt" value="刪除所選"/> </body> </html>
上面的程式碼實現了刪除刪除前的提示作用,下面對上面程式碼的實現做一下簡單介紹。
一.程式碼註釋:
1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼,否則可能會出現無法獲取物件的現象。
2.var obox=document.getElementById("box"),獲取id屬性值為box的元素物件。
3.var obt=document.getElementById("bt"),獲取id屬性值為bt的元素物件。
4.var cks=obox.getElementsByTagName("input"),獲取obox下的input標籤元素物件集合。
5.obt.onclick=function(){},為按鈕註冊onclick點選事件處理函式。
6.if(confirm("確定要刪除?")){},confirm()函式的返回值是true或者false,點選確定就是返回true,點選取消就是返回false,所以點選確定的時候,就可以執行if語句後面的程式碼。
7.for(var index=0;index<cks.length;index++){},通過for迴圈遍歷核取方塊集合。
8.if(cks[index].checked==true){
obox.removeChild(cks[index].parentNode);
index=0
}
判斷當前的核取方塊是否選中,如果選中就將核取方塊的父元素也就是li元素刪除。最後面的index=0非常的重要,因為cks集合的元素是動態變化的,刪除一條元素那麼集合的長度就會減一,如果不將index重置為0,依然按照常規的for迴圈進行,有可能會導致錯誤的發生,所以刪除一個元素,就將index重置為0,相當於重新開始一次for迴圈,這樣就不會出錯了。
二.相關閱讀:
1.getElementsByTagName()函式可以參閱getElementsByClassName()一章節。
2.checked屬性可以參閱javascript checkbox.checked一章節。
3.removeChild()函式可以參閱javascript removeChild()一章節。
4.parentNode可以參閱js parentNode一章節。
相關文章
- JavaScript ·刪除 confirm彈出確認框JavaScript
- javascript實現點選彈出確認刪除警告框程式碼JavaScript
- 點選連結a彈出一個確認框例項程式碼
- layui 樹形結構刪除沒有確認,原始碼加入confirm確認提示框UI原始碼
- javascript實現的點選彈出刪除提示框程式碼例項JavaScript
- js confirm()程式碼例項JS
- 點選連結<a>彈出確認視窗程式碼例項
- js刪除li元素程式碼例項JS
- js confirm()函式用法程式碼例項JS函式
- js確認是否刪除。JS
- 原生js刪除節點程式碼例項JS
- JavaScript confirm() 程式碼例項JavaScript
- 原生js刪除字串中空格程式碼例項JS字串
- js刪除指定的li元素程式碼例項JS
- js刪除字串兩端空格程式碼例項JS字串
- 網頁右下角彈出廣告資訊框例項程式碼網頁
- 點選刪除彈出提示是否刪除程式碼
- js刪除陣列重複元素程式碼例項JS陣列
- js刪除字串中所有空格程式碼例項JS字串
- js刪除陣列中重複項的程式碼例項JS陣列
- js實現的點選彈出確認視窗程式碼JS
- Win10系統下檔案刪除不彈出確認提示框的設定方法Win10
- 點選刪除按鈕彈出是否刪除提示框
- js刪除字串中最後一個字元程式碼例項JS字串字元
- jquery刪除記錄彈出提示框jQuery
- javascript刪除所有cookie例項程式碼JavaScriptCookie
- jquery刪除指定元素程式碼例項jQuery
- 點選文字框彈出可檢索下拉選單程式碼例項
- js動態新增和刪除table表格行程式碼例項JS行程
- js動態建立文字框程式碼例項JS
- js實現的警告框例項程式碼JS
- js實現文字框提示程式碼例項JS
- javascript刪除字串中空格程式碼例項JavaScript字串
- jquery刪除指定子元素程式碼例項jQuery
- javascript刪除指定子元素程式碼例項JavaScript
- jQuery刪除html標籤程式碼例項jQueryHTML
- jQuery刪除表格指定行程式碼例項jQuery行程
- 點選刪除表格行程式碼例項行程