Heim > Artikel > Web-Frontend > Detaillierte grafische Erklärung zum Löschen von Knoten in JavaScript
Detaillierte grafische Erklärung zum Löschen von Knoten in JavaScript
- yuliaOriginal
- 2018-10-09 11:26:384846Durchsuche
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 ,
var list=document.getElementById("myList")
Der zweite Schritt besteht darin, das
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:
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!