So löschen Sie HTML-Tags in JQuery-js-Tutorial-php.cn

So löschen Sie HTML-Tags in JQuery

青灯夜游

Freigeben： 2021-10-29 18:20:19

Original

4899 Leute haben es durchsucht

Löschmethode: 1. Verwenden Sie die Methode „remove()“, Syntax „$(selector).remove()“; 2. Verwenden Sie die Methode „detach()“, Syntax „$(selector).detach()“; )-Methode, Syntax „$(selector).empty()“.

So löschen Sie HTML-Tags in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.7.2-Version, Dell G3-Computer.

Wenn wir in jQuery Elemente löschen möchten, haben wir die folgenden 3 Methoden: remove(), detach() und empty().

Remove()-Methode

In jQuery können wir die Remove()-Methode verwenden, um ein Element und den gesamten darin enthaltenen Inhalt zu entfernen.

Syntax: $(selector).remove()$(selector).remove()

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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

So löschen Sie HTML-Tags in JQuery

detach( ) 方法

在 jQuery 中，detach() 和 remove() 的功能虽然相似，都是将某个元素及其内部所有内容删除，但是两者也有明显的区别。

remove() 方法用于“彻底”删除元素。所谓的“彻底”，指的是不仅会删除元素，还会把元素绑定的事件删除；
detach() 方法用于“半彻底”删除元素。所谓的“半彻底”，指的是只会删除元素，不会把元素绑定的事件删除。

语法：$(selector).detach()

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").detach();
});
});
</script>
</head>

<body>
<p>这是一个p元素段落</p>
<button>删除 p 元素</button>
</body>
</html>

Nach dem Login kopieren

So löschen Sie HTML-Tags in JQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
            $("li").click(function () {
                alert("欢迎来到php中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").remove();
                $($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

So löschen Sie HTML-Tags in JQuery

在这个例子中，我们为每一个 li 元素添加一个点击事件，点击任何一个 li 元素都会弹出一个对话框。在我们点击【删除】按钮后，

jQuery

这一项就会被添加到 ul 元素内部的末尾处。但是这个时候，如果再去点击

jQuery

这一项，会发现之前绑定的点击事件被删除了，并不会弹出对话框。

当我们把 remove() 替换成 detach() 后，可以发现 li 元素被删除后又重新被添加使用时，该元素之前绑定的点击事件依然存在。对于 remove() 和 detach() 这两个方法，可以总结为这一点：元素被删除后又重新被添加，如果不希望该元素保留原来绑定的事件，应该用 remove() 方法；如果希望该元素保留原来绑定的事件，应该使用 detach() 方法。

empty( )方法

在 jQuery 中，我们可以使用 empty() 方法来“清空”某个后代元素。

语法：$(selector).empty()

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.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

So löschen Sie HTML-Tags in JQuery

detach( )-Methode

In jQuery sind die Funktionen von detach() und remove() zwar ähnlich, sie sind jedoch ähnlich sind beide Löscht ein Element und seinen gesamten Inhalt, es gibt jedoch einen deutlichen Unterschied zwischen den beiden.

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. 🎜
Die Methode 🎜detach() wird verwendet, um „halbvoll“ zu löschen " Lösche das Element. Die sogenannte „Halbvollständigkeit“ bedeutet, dass nur Elemente gelöscht werden, an die Elemente gebundene Ereignisse jedoch nicht. 🎜

🎜Syntax: $(selector).detach()🎜🎜Beispiel: 🎜rrreee🎜 So löschen Sie HTML-Tags in JQuery

🎜rrreee🎜

🎜🎜In diesem Beispiel fügen wir ein Klickereignis für jedes Li-Element hinzu. Klicken Sie auf ein beliebiges Li-Element. Ein Dialog Das Feld wird angezeigt. Nachdem wir auf die Schaltfläche [Löschen] geklickt haben, wird das Element

jQuery

am Ende des ul-Elements hinzugefügt. Wenn Sie zu diesem Zeitpunkt jedoch erneut auf das Element

jQuery

klicken, werden Sie feststellen, dass das zuvor gebundene Klickereignis gelöscht wurde und das Dialogfeld nicht angezeigt wird. 🎜🎜Wenn wir „remove()“ durch „detach()“ ersetzen, können wir feststellen, dass das zuvor an das Element gebundene Click-Ereignis weiterhin vorhanden ist, wenn das li-Element gelöscht und dann erneut hinzugefügt wird. Für die beiden Methoden „remove()“ und „detach()“ lässt sich das wie folgt zusammenfassen: Das Element wird gelöscht und dann wieder hinzugefügt. Wenn Sie nicht möchten, dass das Element das ursprünglich gebundene Ereignis beibehält, sollten Sie die Methode „remove()“ verwenden ; Elemente behalten ihre ursprünglich gebundenen Ereignisse und sollten die detach()-Methode verwenden. 🎜🎜🎜empty()-Methode🎜🎜🎜In jQuery können wir die empty()-Methode verwenden, um ein untergeordnetes Element zu „leeren“. 🎜🎜Syntax: $(selector).empty()🎜🎜Beispiel: 🎜🎜rrreee🎜🎜🎜🎜Empfohlene verwandte Video-Tutorials: 🎜jQuery Tutorial🎜(Video)🎜

Das obige ist der detaillierte Inhalt vonSo löschen Sie HTML-Tags in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!