communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

suppression du nœud jQuery DOM

Remove, comme vide, est une méthode de suppression d'éléments, mais Remove supprimera l'élément lui-même et tout ce qu'il contient, y compris les événements liés et les données jQuery liées à l'élément.

Par exemple, pour un nœud, lier un événement click

<div class="hello">
    <p>php中文网</p>
</div>
$('.hello').on("click",fn)

Il est en fait très simple de supprimer ce nœud sans utiliser la méthode remove, mais en même temps, l'événement doit être détruit. Ceci afin d'éviter les "fuites de mémoire" ", les développeurs front-end doivent donc faire attention au nombre d'événements liés et n'oubliez pas de les détruire lorsqu'ils ne sont pas utilisés

Supprimez le div et tous les éléments qu'il contient. via la méthode Remove. La méthode de destruction d'événement sera automatiquement opérée à l'intérieur de Remove, il est donc très simple d'utiliser 

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>php中文网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

supprimer les paramètres d'expression :

L'avantage de Remove que de Empty est que vous pouvez passez une expression de sélection pour filtrer l'ensemble des éléments correspondants qui seront supprimés. Vous pouvez supprimer sélectivement les nœuds spécifiés

Nous pouvons sélectionner un groupe des mêmes éléments via $(), puis transmettre les règles de filtrage via supprimer. (), traitant ainsi

comme ceci. Comparez le code sur la zone de droite, nous pouvons le traiter comme ceci 

$("p").filter(":contains('3')").remove()

Écrivons un exemple de code ci-dessous, mes amis, voyons quel genre d'effet 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <button>点击通过jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    })
    </script>
</body>

</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <h2>通过jQuery remove方法移除元素</h2> <div class="test1"> <p>p元素1</p> <p>p元素2</p> </div> <div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> <button>点击通过jQuery的empty移除元素</button> <button>点击通过jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //删除整个 class=test1的div节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") }) </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492837 joue