Heim >Web-Frontend >js-Tutorial >Detaillierte grafische Erklärung zum Löschen von Knoten in JavaScript

Detaillierte grafische Erklärung zum Löschen von Knoten in JavaScript

yulia
yuliaOriginal
2018-10-09 11:26:384875Durchsuche

JavaScript wird häufig in der Front-End-Entwicklung verwendet. Wissen Sie also, wie man den Endknoten mit JS löscht? In diesem Artikel erfahren Sie, wie Sie Knoten durch Klicken in JS löschen und wie Sie den ersten Knoten in JS löschen. Ich hoffe, er kann Ihnen helfen.

Um einen Knoten zu löschen, müssen wir zuerst den zu löschenden Knoten und sein übergeordnetes Element finden und dann mit „removeChild“ das untergeordnete Element aus dem übergeordneten Element löschen.

Beispiel: Die Liste listet die vier großen Wirtschaftsprüfungsgesellschaften auf. Löschen Sie den ersten Knoten der Liste, nämlich PricewaterhouseCoopers, indem Sie auf die Schaltfläche klicken.

HTML-Teil:

<ul id="myList">
 <li id="li1">普华永道(PwC)</li>
 <li id="li2">德勤(DTT)</li> 
 <li id="li3">毕马威(KPMG)</li> 
 <li id="li4">安永(EY)</li> 
</ul>

Detaillierte Erklärung der Schritte:

Der erste Schritt besteht darin, das Element mit der ID="myList" zu finden ,

  • Übergeordnetes Element
    var list=document.getElementById("myList")

    Der zweite Schritt besteht darin, das

  • -Element mit der ID="li1" zu finden wir wollen
    var li =document.getElementById("li1")

    Im dritten Schritt löschen Sie mit „removeChild“ das untergeordnete Element aus dem übergeordneten Element
    list.removeChild(li)

    Hinweis: DOM muss wissen, welches Element gelöscht werden muss und welches übergeordnete Element es ist

    Eine andere Methode (gleiches Prinzip): Suchen Sie zuerst das untergeordnete Element, das gelöscht werden muss, und Verwenden Sie dann das Attribut parentNode, um das übergeordnete Element zu finden:

    var li=document.getElementById("li1");
    li.parentNode.removeChild(li);

    JS kann nicht nur den ersten Knoten, sondern auch den Endknoten löschen. Suchen Sie bei jedem Knoten, den Sie löschen möchten, einfach die Position des entsprechenden Knotens.

    Der vollständige Code lautet wie folgt:

    <!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>

    Rendering:

    Detaillierte grafische Erklärung zum Löschen von Knoten in JavaScriptDetaillierte grafische Erklärung zum Löschen von Knoten in JavaScript

    Das erste Bild ist ohne Löschen Knoteneffekt, das zweite Bild ist der Effekt nach dem Löschen des ersten Knotens.

    Das Obige beschreibt hauptsächlich das Löschen von Knoten in JS. Es ist relativ detailliert und leicht zu verstehen. Ich hoffe, dass dieser Artikel für Sie hilfreich ist. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial php Charity Training

  • Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung zum Löschen von Knoten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn