Supprimer un élément du DOM dans un plug-in

**cahnory** · 12/04/2010, 16h28

Bonjour tout le monde amis et inconnus.
Mon titre est peut-être pas très juste mais je n'ai pas trouvé mieux.
Alors voilà, je code un plugin qui duplique/supprime des éléments sélectionnés initialement lors de l'appel du plugin. Pour faire simple si j'appel mon plugin de la sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.monElement').test();

et que j'ai 4 éléments ayant la classe "monElement" l'un de ces 4 éléments pourra potentiellement être dupliqué et/ou supprimé.
Je me heurte à un problème étrange (en tout cas pour moi). Lorsque je supprime un de ces éléments, ma sélection, elle, en contient toujours le même nombre. Pensant d'abord que cela venait de mon plugin je l'ai simplifié au maximum... le problème persistent. Voici la version ultra simplifiée qui permettra à ceux que j'aurai pu larguer dans ma confusion de mieux comprendre de quoi il retourne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
(function($) {
	$.fn.test = function() {
		var initSize		=	$(this).length;
		var selector	=	$(this).selector;		
 
		$(this).last().remove();
 
		alert(initSize + ' => ' + $(this).length + ' (' + $(selector).length + ')');
	};
})(jQuery);

Le derniers cas (entre parenthèses) affiche le bon nombre de résultat mais je souhaiterai éviter de m'y prendre comme ça et/ou au moins comprendre pourquoi je n'obtiens pas ce que je veux. Merci pour votre aide.

**danielhagnoul** · 12/04/2010, 23h40

Bonsoir.

Exemple, avec un plug-in minimum valide :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
		(function($){
			// un plug-in minimum valide doit utiliser return this.each() !
			$.fn.test = function(){
				var n = this.length;
 
				return this.each(function(i, item){
					if ((i == 0) || (i == n-1)){
						$(item).remove();
					}
				});
			};
		})(jQuery);
 
		$(function(){
			$("#btn").click(function(){
				$("p").test();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn">Test</button>
		<p>Un mot pour remplir 1</p>
		<p>Un mot pour remplir 2</p>
		<p>Un mot pour remplir 3</p>
		<p>Un mot pour remplir 4</p>
		<p>Un mot pour remplir 5</p>
		<p>Un mot pour remplir 6</p>
		<p>Un mot pour remplir 7</p>
	</div>
</body>  
</html>

**cahnory** · 14/04/2010, 13h09

Merci danielhagnoul pour ta réponse. Le but ici n'était pas de montrer la meilleur méthode pour faire un plugin (j'utilise d'ailleur celle que tu donnes qui est décrite dans la doc de jQuery) mais d'éclaircir au maximum le code pour ne laisser que ce qui me pose problème. Mais je conçoit que l'on puisse du coup penser que l'erreur pût venir de là et j'aurai du préciser avoir testé dans des conditions réelles.
Pour en revenir au problème, je voit bien la parade que tu proposes seulement si je compte à un autre moment re-parcourir mon this (celui faisant référence au plugin) via each, je vais boucler sur n0 element (la taille de départ). Je pense même que ça peut ralentir (de façon insignifiante, peut-être mais c'est pas le sujet) n'importe quel fonction car comme dit dans la doc l'element même s'il est retiré du dom reste dans l'objet jquery.
Ce n'est pas le cas dans ton exemple car on appel le plugin à chaque click. dans mon cas, le plugin bind le click qui appel une fonction qui supprime un élément. J'ai tout de même trouvé une solution à mon problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		(function($){
			// un plug-in minimum valide doit utiliser return this.each() !
			$.fn.test = function(){
				var plugin = this;
 
				$('.start, .current').text($(plugin).length);
 
				return this.each(function(i, item){
					$(item).bind('click.test', function(){ remove(this) });
				});
 
				function remove(e)
				{
					//	Retrait du DOM
					$(e).remove();
 
					//	"Retrait" de l'objet jQuery
					plugin	=	$(plugin).not(e);
 
					$('.current').text($(plugin).length);
				}
			};
		})(jQuery);
 
		$(function(){
			$("p").test();
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<span class="start">0</span> :
		<span class="current">0</span>
		<p>Un mot pour remplir 1</p>
		<p>Un mot pour remplir 2</p>
		<p>Un mot pour remplir 3</p>
		<p>Un mot pour remplir 4</p>
		<p>Un mot pour remplir 5</p>
		<p>Un mot pour remplir 6</p>
		<p>Un mot pour remplir 7</p>
	</div>
</body>  
</html>

En gros je fait une copie de this qui du coup me permet de l'atteindre de n'importe où dans le plugin (j'utilisai déjà une copie pour ça) et je rafraichi cet objet via not(element).

Supprimer un élément du DOM dans un plug-in

jQuery

Vue hybride

Discussions similaires

Partager

Partager