圖文詳解JavaScript中如何刪除節點
- yulia原創
- 2018-10-09 11:26:384836瀏覽
在前端開發中常常需要使用JavaScript，那你知道如何用JS刪除尾節點嗎？這篇文章就和大家講講JS如何透過點擊刪除節點和JS刪除首節點的方法，有興趣的朋友可以參考一下，希望可以幫助你。
想要刪除節點，我們首先要找到需要刪除的節點以及它父元素，然後用removeChild從父元素中刪除子元素。
實例：清單列舉了四大會計事務所，透過點擊按鈕刪除清單的第一個節點，即普華永道。
HTML部分：
<ul id="myList"> <li id="li1">普华永道（PwC）</li> <li id="li2">德勤（DTT）</li> <li id="li3">毕马威（KPMG）</li> <li id="li4">安永（EY）</li> </ul>
步驟詳解：
第一步，找到id="myList" 的元素，即
var list=document.getElementById("myList")
第二步，找到id="li1" 的
var li =document.getElementById("li1")
第三步，用removeChild從父元素中刪除子元素
list.removeChild(li)
#註：DOM 必須知道需要刪除哪個元素以及它的父元素
另一種方法（原理相同）：首先找到需要刪除的子元素，然後用parentNode 屬性查找到它的父元素，程式碼如下：
var li=document.getElementById("li1");
li.parentNode.removeChild(li);
JS不僅可以刪除首節點，還可以刪除尾節點，以及任何你想要刪除的節點，只要找到對應節點的位置就可以。
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="myList">
<li id="li1">普华永道（PwC）</li>
<li id="li2">德勤（DTT）</li>
<li id="li3">毕马威（KPMG）</li>
<li id="li4">安永（EY）</li>
</ul>
<p>单击按钮删除列表中的第一个元素</p>
<button onclick="myFunction()">点击删除</button>
</body>
<script type="text/javascript">
function myFunction(){
var list=document.getElementById("myList");
var li=document.getElementById("li1");
list.removeChild(li);
}
</script>
</html>效果圖：
#第一個圖是未刪除節點的效果，第二個圖是刪除首節點後的效果。
以上主要介紹了JS如何刪除節點，比較詳細，容易理解，初學者可以自己動手嘗試，希望這篇文章對你有所幫助！更多相關教學請造訪 JavaScript影片教學 php公益訓練
#以上是圖文詳解JavaScript中如何刪除節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn