Was nützt JQuery, um Dom-Elemente zu entfernen?-Front-End-Fragen und Antworten-php.cn

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

青灯夜游

Freigeben： 2022-03-23 18:25:27

Original

2230 Leute haben es durchsucht

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.

Was nützt JQuery, um Dom-Elemente zu 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()

Nach dem Login kopieren

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>

Nach dem Login kopieren

$("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()

Nach dem Login kopieren

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>

Nach dem Login kopieren

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()

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!