JavaScript刪除節點自身

admin發表於2017-03-20
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{text-align:center;}
#box{
  width:200px;
  height:150px;
  background:red;
  margin:0px auto;
}
#inner{
  width:50px;
  height:50px;
  margin:0px auto;
  background:blue;
}
</style>
<script type="text/javascript">  
window.onload=function(){
  var inner=document.getElementById("inner")
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    inner.parentNode.removeChild(inner);
  }
}
</script>  
</head> 
<body>
<div id="box">
  <div id="inner"></div>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

以上程式碼點選按鈕就實現了我們的要求，原理很簡單，就是首先獲取此元素的父元素。

然後再利用父元素的removeChild方法刪除當前元素就可以了，程式碼比較簡單這裡就不多介紹。

相關閱讀：

（1）.onclick事件參閱JavaScript click 事件一章節。 

（2）.parentNode參閱JavaScript parentNode一章節。

相關文章