jQuery remove() Methode
Die Methode remove() entfernt Elemente aus DOM in jQuery. Ebenso entfernt die empty()-Methode nur die untergeordneten Elemente des ausgewählten Elements im DOM.
Dieses Tutorial demonstriert die Verwendung der Methoden remove und empty in jQuery.
jQuery remove()-Methode
Die Methode remove() kann ausgewählte Elemente aus dem DOM entfernen. Die Methode entfernt die ausgewählten Elemente und alles innerhalb des Elements.
Die Syntax für diese Methode ist unten.
$(selector).remove(selector)
Wobei selector ein optionaler Parameter ist, der angibt, ob ein oder mehrere Elemente entfernt werden sollen, wenn mehr als ein Element entfernt werden soll, können wir sie durch ein Komma trennen. Versuchen wir ein Beispiel für die Methode remove().
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#RemoveDiv").remove();
});
});
</script>
</head>
<body>
<div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Will be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<br>
<div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Will not be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<button>Remove Div</button>
</body>
</html>
Der obige Code entfernt das ausgewählte div und seine untergeordneten Elemente. Siehe Ausgabe:
Wie wir sehen können, löscht die Methode remove() alle Elemente innerhalb der ausgewählten Elemente. Eine andere Methode, empty(), entfernt nur die untergeordneten Elemente.
jQuery empty()-Methode
Die Methode empty() kann alle untergeordneten Elemente des ausgewählten Elements entfernen. Es entfernt auch den Inhalt in den untergeordneten Elementen.
Die Syntax für die Methode empty() ist unten.
$('selector').empty();
Wo selector die ID, die Klasse oder der Elementname sein kann, versuchen wir ein Beispiel für die empty-Methode.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#RemoveDiv").empty();
});
});
</script>
</head>
<body>
<div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
Hello this is the div content
<h1> This Div Content Will be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<br>
<div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Content Will not be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<button>Remove Div</button>
</body>
</html>
Der obige Code entfernt nur den untergeordneten Inhalt von div, nicht das div selbst. Siehe Ausgabe:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook