Heim >Web-Frontend >js-Tutorial >So löschen Sie HTML-Tags in JQuery
So löschen Sie HTML-Tags in JQuery
- 青灯夜游Original
- 2021-10-29 18:20:194929Durchsuche
Löschmethode: 1. Verwenden Sie die Methode „remove()“, Syntax „$(selector).remove()“; 2. Verwenden Sie die Methode „detach()“, Syntax „$(selector).detach()“; )-Methode, Syntax „$(selector).empty()“.
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>
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>
<!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>
在这个例子中，我们为每一个 li 元素添加一个点击事件，点击任何一个 li 元素都会弹出一个对话框。在我们点击【删除】按钮后，
当我们把 remove() 替换成 detach() 后，可以发现 li 元素被删除后又重新被添加使用时，该元素之前绑定的点击事件依然存在。对于 remove() 和 detach() 这两个方法，可以总结为这一点：元素被删除后又重新被添加，如果不希望该元素保留原来绑定的事件，应该用 remove() 方法；如果希望该元素保留原来绑定的事件，应该使用 detach() 方法。
empty( )方法
在 jQuery 中，我们可以使用 empty() 方法来“清空”某个后代元素。
语法：$(selector).empty()
<!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>
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. 🎜
$(selector).detach()🎜🎜Beispiel: 🎜rrreee🎜
🎜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 $(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!