Heim > Artikel > Web-Frontend > Was nützt JQuery, um Dom-Elemente zu entfernen?

Was nützt JQuery, um Dom-Elemente zu entfernen?

青灯夜游Original: 2022-03-23 18:25:272169Durchsuche

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.

Was nützt JQuery, um Dom-Elemente zu entfernen?

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

jQuery

am Ende des ul-Elements hinzugefügt.

Was nützt JQuery, um Dom-Elemente zu entfernen?

Wenn Sie zu diesem Zeitpunkt jedoch erneut auf das Element

jQuery

klicken, werden Sie feststellen, dass das zuvor gebundene Klickereignis vorhanden ist, und ein Dialogfeld wird angezeigt.

Was nützt JQuery, um Dom-Elemente zu entfernen?

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>

Was nützt JQuery, um Dom-Elemente zu entfernen?

[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!

Stellungnahme：

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

Vorheriger Artikel：So erhalten Sie Inhalte ohne Tags in JQueryNächster Artikel：So erhalten Sie Inhalte ohne Tags in JQuery

In Verbindung stehende Artikel

Mehr sehen