示例1:

刪除元素節點

要刪除某個元素節點有兩步
第一：先獲取該元素的父節點
第二：通過父節點，呼叫removeChild刪除該節點

<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
 
</script>
 
<div id="parentDiv">
  <div id="div1"
 
>安全的div</div>
  <div id="div2">即將被刪除的div</div>
</div>
 
<button onclick="removeDiv()">刪除第二個div</button>

示例2:

刪除屬性節點

要刪除某個屬性節點有兩步
第一：先獲取該元素節點
第二：元素節點，呼叫removeAttribute刪除指定屬性節點

<script>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute(
 
"href");
}
 
</script>
 
<a id="link" href="http://12306.com">http://12306.com</a>
 
<br>
<button onclick="removeHref()">刪除超鏈的href屬性</button>

示例3:

刪除文字節點

刪除文字節點
1. 通過childNodes[0] 獲取文字節點
注:children[0] 只能獲取第一個子元素節點，不能獲取文字節點
2. 通過removeChild刪除該文字節點
但是這種方式比較麻煩，一般都是直接通過innerHTML設定為空即可。

<script>
 
function removeDiv1(){
  var parentDiv = document.getElementById("parentDiv");
  var textNode = parentDiv.childNodes[0];
  parentDiv.removeChild(textNode);
}
function removeDiv2(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="";
}
function recover(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="這裡是文字 ";
}
 
</script>
 
<style>
button{
display:block;
}
</style>
 
<div id="parentDiv">
   這裡是文字
 
</div>
 
<button onclick="removeDiv1()">通過removechild刪除div下的文字節點</button>
<button onclick="removeDiv2()">通過innerHTML讓內容置空</button>
<button onclick="recover()">恢復內容</button>