Comment supprimer les balises HTML dans jquery-js tutoriel-php.cn

Comment supprimer les balises HTML dans jquery

青灯夜游

Libérer： 2021-10-29 18:20:19

original

4857 Les gens l'ont consulté

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

Comment supprimer les balises HTML dans jquery

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>

Copier après la connexion

Comment supprimer les balises HTML dans 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>

Copier après la connexion

Comment supprimer les balises HTML dans 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>

Copier après la connexion

Comment supprimer les balises HTML dans jquery

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

jQuery

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

jQuery

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

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

empty( )方法

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

语法：$(selector).empty()

Exemple :

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

Copier après la connexion

Comment supprimer les balises HTML dans jquery

méthode detach()

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. 🎜

🎜Syntaxe : $(selector).detach()🎜🎜Exemple : 🎜rrreee🎜 Comment supprimer les balises HTML dans jquery

🎜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

jQuery

sera ajouté à la fin de l'élément ul. Mais à ce stade, si vous cliquez à nouveau sur l'élément

jQuery

, vous constaterez que l'événement de clic précédemment lié a été supprimé et la boîte de dialogue ne s'affichera pas. 🎜🎜Lorsque nous remplaçons remove() par detach(), nous pouvons constater que lorsque l'élément li est supprimé puis rajouté, l'événement click précédemment lié à l'élément existe toujours. Pour les deux méthodes Remove() et Detach(), cela peut se résumer ainsi : l'élément est supprimé puis ajouté à nouveau. Si vous ne souhaitez pas que l'élément conserve l'événement lié d'origine, vous devez utiliser la méthode Remove(). Les éléments conservent leurs événements initialement liés et doivent utiliser la méthode detach(). 🎜🎜🎜Méthode empty()🎜🎜🎜Dans jQuery, nous pouvons utiliser la méthode empty() pour "vider" un élément descendant. 🎜🎜Syntaxe : $(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!