Heim > Web-Frontend > js-Tutorial > So löschen Sie untergeordnete Knoten in Javascript

So löschen Sie untergeordnete Knoten in Javascript

青灯夜游
Freigeben: 2023-01-05 16:09:43
Original
6249 Leute haben es durchsucht

So löschen Sie untergeordnete Knoten in JavaScript: Rufen Sie zuerst das übergeordnete Knotenobjekt und das untergeordnete Knotenobjekt ab. Verwenden Sie dann die Methode „removeChild()“, um den untergeordneten Knoten zu löschen. Die Syntax lautet „übergeordnetes Knotenobjekt.removeChild (untergeordnetes Knotenobjekt)“. Die Methode „removeChild()“ kann einen untergeordneten Knoten auf dem übergeordneten Knoten löschen.

So löschen Sie untergeordnete Knoten in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript untergeordneten Knoten löschen

Die Methode „removeChild()“ kann einen untergeordneten Knoten auf dem übergeordneten Knoten löschen.

Syntax:

parentNode.removeChild(nodeName)
Nach dem Login kopieren
  • nodeName: Der Name des aktuellen Knotens

  • parentNode: Der übergeordnete Knoten des aktuellen Knotens

Beispiel:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		div{
			border: 2px dashed #006DAF;
			padding: 10px;
		}
		p{
			background-color: palegoldenrod;
		}
	</style>
</head> 
  
<body> 
    <div>div元素--父元素
     <p>p元素--子元素</p>
     <p>p元素--子元素</p>
    </div> <br />
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
    	var div = document.querySelector("div"); 
        var p = document.querySelector("p"); 

            div.removeChild(p); 

    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>
Nach dem Login kopieren

Rendering:

So löschen Sie untergeordnete Knoten in Javascript

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonSo löschen Sie untergeordnete Knoten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage