Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()-js tutoriel-php.cn

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

青灯夜游

Libérer： 2019-03-01 10:51:50

original

3247 Les gens l'ont consulté

Il existe trois façons de supprimer des éléments et du contenu dans jQuery, à savoir : la méthode remove(), la méthode detach() et la méthode empty(). L'article suivant vous présentera comment ces trois méthodes suppriment des éléments et quelles sont les différences entre la méthode remove(), la méthode detach() et la méthode empty(). [Recommandation du didacticiel vidéo : Tutoriel jQuery]

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Méthode jQuery Remove()

supprimer () est utilisée pour supprimer l'élément sélectionné, y compris tous les éléments de texte et de nœud enfant qu'il contient.

Ce qui suit est un exemple de code pour savoir comment la méthode Remove() supprime des éléments.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>jQuery remove()方法</title>
<style>
#demo{
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1 style="color:red;">PHP中文网</h1>
<div id="demo">
  <h2>使用remove()方法删除！</h2>
  <p>测试文本！</p>
</div>
<br>
<button>删除</button>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").remove();
});
});
</script>
</body>
</html>

Copier après la connexion

Sortie :

Avant de cliquer sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Après avoir cliqué sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Méthode jQuery detach()

La méthode detach() est utilisée pour supprimer l'élément sélectionné, y compris tout le texte et le nœud enfant éléments en son sein.

<script src="js/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("#demo").detach();
		});
	});
</script>

Copier après la connexion

Sortie :

Avant de cliquer sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Après avoir cliqué sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Explication :

Les méthodes remove() et detach() suppriment toutes deux l'élément sélectionné et tout son contenu, mais. la méthode remove() ne conservera que l'élément lui-même, pas les données jQuery de l'élément. Par exemple, les événements et les données liés seront supprimés.

Cependant, en plus de conserver l'élément lui-même, la méthode detach() conservera également tous les événements liés, les données supplémentaires, etc.

Méthode jQuery empty()

La méthode empty() est utilisée pour supprimer tout le contenu contenu dans l'élément sélectionné, y compris tout le texte et les enfants. éléments.

Ce qui suit est un exemple de code pour savoir comment la méthode empty() supprime des éléments.

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").empty();
});
});
</script>

Copier après la connexion

Sortie :

Avant de cliquer sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Après avoir cliqué sur le bouton Supprimer :

Comment supprimer des éléments avec jQuery ? Comparaison simple de remove(), detach() et empty()

Remarque : La méthode

empty() supprimera uniquement tout le contenu de l'élément sélectionné, mais l'élément sélectionné lui-même ne sera pas supprimé.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!