Maison >interface Web >js tutoriel >Comment supprimer les balises HTML dans jquery
Comment supprimer les balises HTML dans jquery
- 青灯夜游original
- 2021-10-29 18:20:194931parcourir
Méthode de suppression : 1. Utilisez la méthode Remove(), la syntaxe "$(selector).remove()" ; 2. Utilisez la méthode detach(), la syntaxe "$(selector).detach()" ; ), syntaxe "$(selector).empty()".
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.7.2, ordinateur Dell G3.
Dans jQuery, si l'on veut supprimer des éléments, nous avons les 3 méthodes suivantes : remove(), detach() et empty().
Méthode Remove()
Dans jQuery, nous pouvons utiliser la méthode Remove() pour supprimer un élément et tout le contenu qu'il contient.
Syntaxe : $(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>
Dans jQuery, bien que les fonctions detach() et remove() soient similaires, elles sont tous les deux Supprime un élément et tout son contenu, mais il existe une nette différence entre les deux.
- La méthode 🎜remove() est utilisée pour supprimer "complètement" un élément. Ce qu'on appelle "complet" signifie que non seulement l'élément sera supprimé, mais également les événements liés à l'élément seront supprimés 🎜
- La méthode 🎜detach() est utilisée pour "semi-complètement" ; " Supprimez l'élément. Ce qu'on appelle "semi-complet" signifie que seuls les éléments seront supprimés et que les événements liés aux éléments ne seront pas supprimés. 🎜
$(selector).detach()🎜🎜Exemple : 🎜rrreee🎜
🎜rrreee🎜
🎜🎜Dans cet exemple, nous ajoutons un événement click pour chaque élément li, cliquez sur n'importe quel élément li Une boîte de dialogue une boîte apparaîtra. Après avoir cliqué sur le bouton [Supprimer], l'élément $(selector).empty()🎜🎜Exemple : 🎜🎜rrreee🎜🎜🎜🎜Tutoriels vidéo associés recommandés : 🎜Tutoriel jQuery🎜 (Vidéo)🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!