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

So löschen Sie Div-Knoten in Javascript

青灯夜游
Freigeben: 2023-01-05 16:08:15
Original
15662 Leute haben es durchsucht

Methode: 1. Rufen Sie zuerst den Div-Knoten ab und verwenden Sie dann Remove (), um den Div-Knoten zu löschen. Die Syntax lautet „div node.remove();“. 2. Rufen Sie zuerst den übergeordneten Knoten des Div ab, dann den Div-Knoten und löschen Sie schließlich den Div-Knoten mit der Anweisung „parent node.removeChild(div node)“.

So löschen Sie Div-Knoten in Javascript

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

Methode 1: Verwenden Sie „remove()“, um einen Knoten zu löschen.

Die Methode „remove()“ kann verwendet werden, um alle Elemente auf dem übergeordneten Knoten zu entfernen, einschließlich aller Text- und untergeordneten Knoten.

Beispiel:

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

            div.remove(); 

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

Rendering:

So löschen Sie Div-Knoten in Javascript

Methode 2: Verwenden Sie „removeChild()“, um einen Knoten zu löschen. Die Methode „removeChild()“ wird verwendet, um einen untergeordneten Knoten auf dem übergeordneten Knoten zu löschen.

Beispiel:

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

            body.removeChild(div); 

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

Rendering:


[Empfohlenes Lernen: So löschen Sie Div-Knoten in JavascriptJavascript-Tutorial für Fortgeschrittene

]

Das obige ist der detaillierte Inhalt vonSo löschen Sie Div-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