首頁 > web前端 > js教程 > 主體

圖文詳解JavaScript中如何刪除節點

yulia
發布: 2018-10-09 11:26:38
原創
4848 人瀏覽過

在前端開發中常常需要使用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>
    登入後複製

    效果圖:

    圖文詳解JavaScript中如何刪除節點圖文詳解JavaScript中如何刪除節點

    #第一個圖是未刪除節點的效果,第二個圖是刪除首節點後的效果。

    以上主要介紹了JS如何刪除節點,比較詳細,容易理解,初學者可以自己動手嘗試,希望這篇文章對你有所幫助!更多相關教學請造訪 JavaScript影片教學  php公益訓練

    #

    以上是圖文詳解JavaScript中如何刪除節點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板