Heim >Web-Frontend >Front-End-Fragen und Antworten >Was nützt JQuery, um Dom-Elemente zu entfernen?
jquery verwendet: 1. die Methode „remove()“, um das angegebene dom-Element und seinen gesamten Inhalt zu löschen. 2. die Methode „detach()“, um das angegebene dom-Element und seinen gesamten Inhalt zu löschen, aber nicht das gebundene Ereignis. Die Methode empty() kann das angegebene untergeordnete Dom-Element entfernen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
Wenn wir in jQuery Dom-Elemente löschen möchten, haben wir die folgenden 3 Methoden: remove(), detach() und empty().
1. Remove()-Methode
remove()-Methode kann ein Element und den gesamten darin enthaltenen Inhalt löschen.
$(selector).remove()
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("li:nth-child(4)").remove();
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>$("li:nth-child(4)").remove() bedeutet, das 4. li-Element unter dem ul-Element zu löschen. Denken Sie daran, dass in jQuery mit Ausnahme der beiden Selektoren: nth-child() und :nth-of-type() die Indizes aller anderen Selektoren oder jQuery-Methoden bei 1 beginnen. 0 gestartet.
2. detach()-Methode
Obwohl die Funktionen von detach() und remove() ähnlich sind, löschen sie beide ein Element und seinen gesamten Inhalt, weisen aber auch offensichtliche Unterschiede auf Unterschied. Die Methode
remove() wird verwendet, um ein Element „vollständig“ zu entfernen. Das sogenannte „vollständig“ bedeutet, dass nicht nur das Element gelöscht wird, sondern auch die an das Element gebundenen Ereignisse. Mit der Methode
detach() wird das Element „halbvollständig“ gelöscht. Die sogenannte „Halbvollständigkeit“ bedeutet, dass nur Elemente gelöscht werden, an die Elemente gebundene Ereignisse jedoch nicht.
$(selector).detach()
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("li").click(function () {
alert("欢迎来到PHP中文网！")
});
$("#btn").click(function () {
var $li = $("li:nth-child(4)").detach();
$($li).appendTo("ul");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>In diesem Beispiel fügen wir jedem Li-Element ein Klickereignis hinzu, um ein Dialogfeld aufzurufen. Nachdem wir auf die Schaltfläche [Löschen] geklickt haben, wird das Element
Wenn Sie zu diesem Zeitpunkt jedoch erneut auf das Element
3. Methode empty()
In jQuery können wir die Methode empty() verwenden, um ein untergeordnetes Element zu „leeren“.
$(selector).empty()
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(4)").empty();
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
[Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend]
Das obige ist der detaillierte Inhalt vonWas nützt JQuery, um Dom-Elemente zu entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!