js如何刪除div下指定型別的標籤

admin發表於2017-03-20
JS型別

在實際應用中可能會遇到標題中的需求，儘管不多，下面就通過程式碼例項介紹一下如何實現此功能，希望能夠從中起到舉一反三的功效，程式碼如下:

[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 inputs=obox.getElementsByTagName("input");
  var num=inputs.length;
  for(var index=0,count=0;count<num;count++){
    obox.removeChild(inputs[index]) 
  }
}
</script>
</head>
<body>
<div id="box">
  <input type="text" value="螞蟻部落一"/>
  <input type="password" value="1234"/>
  <div>螞蟻部落二</div>
  <div>螞蟻部落三</div>
</div>
</body>
</html>

程式碼實現了我們的要求，下面對需要特別注意的地方進行一下簡單介紹。

上面的程式碼非常的簡單，唯一需要我們主要的是for迴圈語句的使用，利用getElementsByTagName()可以獲取input標籤的物件集合，如果使用下面的程式碼則只能夠刪除第一個input標籤:

[JavaScript] 純文字檢視 複製程式碼
for(var index=0;index<inputs.length;index++){
  obox.removeChild(inputs[index]) 
}

因為當刪除第一個input之後，inputs集合中只有一個元素，但是這個時候index變成了1，同時inputs.length也變成了1，這樣就不滿足條件了，所以無法執行for迴圈。

相關文章