jQuery - supprimer des éléments


jQuery - Supprimer des éléments

Avec jQuery, vous pouvez facilement supprimer des éléments HTML existants.

Supprimer des éléments/contenus

Pour supprimer des éléments et du contenu, vous pouvez généralement utiliser les deux éléments suivants Méthodes jQuery :

  • remove() - supprime l'élément sélectionné (et ses enfants)

  • empty() - supprime-le de l'élément sélectionné Supprimer les éléments enfants

Méthode jQuery Remove()

La méthode jQuery Remove() supprime l'élément sélectionné et ses éléments enfants.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode jQuery vide()

jQuery vide( ) méthode delete Les éléments enfants de l'élément sélectionné.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Filtrer les éléments supprimés

Méthode jQuery Remove() Accepte également un paramètre qui vous permet de filtrer les éléments supprimés.

Ce paramètre peut être n'importe quelle syntaxe de sélecteur jQuery.

L'exemple suivant supprime tous les éléments <p> avec class="italic":

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>

Exécuter Instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne