javascript實現的點選彈出刪除提示框程式碼例項

admin發表於2017-03-31
JavaScript

本章節介紹一下如何利用原生javascript實現當要刪除指定內容時，彈出一個提示對話方塊。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-size:13px;
}
.divShow{
  width:280px;
  padding-left:10px;
}
.divShow span{
  padding-left:50px;
}
ul li{
  list-style:none;
  background-color:#eee;
  margin:5px;
  height:30px;
  line-height:30px;
 }
#del{
  border:solid 1px #666;
  padding:2px;
  width:65px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("del");
  var obox=document.getElementById("box");
  var cks=obox.getElementsByTagName("input");
   
  obt.onclick=function(){
    if(confirm("真的要刪除選中項嗎?")){
      var arr=[];
      for(var index=0;index<cks.length;index++){
        if(cks[index].checked){
          arr.push(cks[index])
        }
      }
      for(var j=0;j<arr.length;j++){
        obox.removeChild(arr[j].parentNode);
      }
    }
  }
}
</script>
</head>
<body>
<div class="divShow">
  <ul id="box">
    <li><input type="checkbox" id="Checkbox" /><a href="#">螞蟻部落一softwhy.com</a></li> 
    <li><input type="checkbox" id="Checkbox" /><a href="#">螞蟻部落二softwhy.com</a></li>
  </ul>
  <span><input type="button" id="del" value="刪除"/></span>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var obt=document.getElementById("del")，獲取刪除按鈕元素物件。

3.var obox=document.getElementById("box")，獲取id屬性值為box的元素物件。

4.var cks=obox.getElementsByTagName("input")，獲取obox下所有的input元素。

5.obt.onclick=function(){}，為按鈕註冊click事件處理函式。

6.if(confirm("真的要刪除選中項嗎?")){}，判斷是否點選了確認按鈕。

7.var arr=[]，宣告一個陣列，用來存放選中的核取方塊。

8.for(var index=0;index<cks.length;index++){  if(cks[index].checked){

    arr.push(cks[index])

  }

}遍歷每一個核取方塊，並將選中的核取方塊存入陣列。

9.for(var j=0;j<arr.length;j++){

  obox.removeChild(arr[j].parentNode);

}刪除陣列中的核取方塊。

二.相關閱讀:

1.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

2.confirm()可以參閱js confirm()一章節。

3.parentNode可以參閱js parentNode一章節。

4.removeChild()可以參閱javascript removeChild()一章節。

5.dom元素集合動態情況可以參閱dom元素集合是動態的一章節。

相關文章