Suppresion d'élément avec jQuery

12 avr. 2010, 01:12

Bonsoir,

Voilà ça fait au moins 2h que je m'énerve à supprimer une div mais rien ne fonctionne.

Voici mon script:

	$("div.pop ul li a").click(function() {
		if(!$(this).hasClass("selected")) {
			$(this).addClass("selected");
			$(this).append('<div id="delete"></div>');
		
			Config.option.action = true;
		}
	});
	
	$("div.pop ul li a.selected div").live('click', function() {
		$(this).parent().removeClass("selected");
		$(this).parent().not($("#delete")[0]);
		
		Config.option.action = true;
	});

Et voici le html:

<div class="pop">
     <ul>
         <li><a href="#">lien 1</a></li>
         <li><a href="#">lien 2</a></li> 
         <li><a href="#" class="selected">lien 3 <div></div></a></li> 
         <li><a href="#">lien 4</a></li>
     </ul>               
</div>

Donc quand je clique sur le lien la class s'ajoute bien et quand je clique sur la div la class se supprime bien.

Par contre la div reste et donc si je reclique sur un lien qui était sélectionné avant deux div apparaisse et là problème vu que met div affiche une croix de suppression et ben je me retrouve avec deux croix au lieu d'une.

J'ai essayé plusieurs chose comme:

Code : Tout sélectionner

$("div.pop ul li a").not($("div.pop ul li a div"));

Ou:

Code : Tout sélectionner

$(this).parent().remove('<div></div>');

etc.....

Tout ce que j'essaye ne fonctionne pas donc est-ce que vous savez comment faire?

Merci d'avance...

++

12 avr. 2010, 01:29

salut :

t'as testé : $('#delete').remove() ??

http://api.jquery.com/remove/

@+

12 avr. 2010, 01:46

J'avais testé:

Code : Tout sélectionner

$(this).remove();

Ton code fonctionne merci bcp je suis enfin tranquille avec ça.

Good night ++

12 avr. 2010, 02:01

En faites non il y a un problème si je sélectionne trois éléments l'un derrière l'autre j'obtiens ceci:

<div class="pop">
     <ul>
         <li><a href="#" class="selected">lien 1 <div></div></a></li>
         <li><a href="#" class="selected">lien 2 <div></div></a></li>
         <li><a href="#" class="selected">lien 3 <div></div></a></li>
         <li><a href="#">lien 4</a></li>
     </ul>              
</div>

Et je veux supprimer le troisième et bien ca me supprime aussi le deuxième sans supprimer la classe donc j'obtiens:

<div class="pop">
     <ul>
         <li><a href="#" class="selected">lien 1</a></li>
         <li><a href="#" class="selected">lien 2 <div></div></a></li>
         <li><a href="#">lien 3</a></li>
         <li><a href="#">lien 4</a></li>
     </ul>              
</div>

12 avr. 2010, 14:47

<li><a href="#" class="selected">lien 3 <div></div></a></li>

C'est pas valide comme code. On ne peut pas mettre un élément de type bloc (div) à l'intérieur d'un élément de type en ligne <a>

12 avr. 2010, 18:13

Au début j'avais mit un span mais la croix n'apparaissait pas donc j'ai mit une div la elle apparait donc si ta une idée pour que je mette autre chose que la div je suis preneur.

12 avr. 2010, 23:30

une span .. avec des dimensions stricts ! ya pas de raison que ça ne s'affiche pas !...

et pourquoi ne pas mettre directement une <img /> ? si c'est pour une croix cliquable ... ce serait peu-être mieux non ?

13 avr. 2010, 00:08

Justement j'ai mit une span avec des dimensions mais le width n'est pas respecté.

Voici mon code:

.option .select .pop ul li a.selected span{
        display:block;
	float:right;
	background-image:url(images/delete.png);
	background-position:0 0;
	background-repeat:no-repeat;
	width:15px;
	height:15px;
}

.option .select .pop ul li a.selected span:hover{ background-position:-15px 0; }

Mais mes deux croix apparaisse et quand je met la souris dessus une seule apparait.

Bizarre quand même.

13 avr. 2010, 00:51

Et pourquoi pas la proposition de Nours312 avec une simple balise <img ...> et un roolover en javascript qui change la source de l'image ?
Souvent bien plus facile à mettre en place, et si js désactivé la fonctionnalité existe encore et seul l'effet disparaît donc no souci...

14 avr. 2010, 11:55

Ok je vais voir ça pour la balise img et je pense que je vais interdire la visualisation du site si js est désactivé car sinon le visiteur ne pourra bien naviguer car plusieur fonction ne pourra être mise en place en php donc le site ne pourra fonctionner bien du moins la recherche dans plusieur catégories.

14 avr. 2010, 15:02

Ok je vais voir ça pour la balise img et je pense que je vais interdire la visualisation du site si js est désactivé car sinon le visiteur ne pourra bien naviguer car plusieur fonction ne pourra être mise en place en php donc le site ne pourra fonctionner bien du moins la recherche dans plusieur catégories.

pas bien !...

14 avr. 2010, 16:52

Le truc c'est la classe .pop n'apparait que par le biais de js donc si le js est dé"désactivée automatique ment la class .pop ne peu plus être afficher.

Et les élément li qui ont la class .selected sont les éléments choisi par le visiteur mais eux aussi ne peuvent être sélectionné par js et puis je recharge les données que une fois la div .pop refermer et si js est désactivé je dois faire une page avec des checkbox c'est bien ça???

14 avr. 2010, 17:19

Le plus pratique selon moi pour faire du js non intrusif, c'est de faire d'abord les fonctionnalités de navigation en php et ensuite d'ajouter la couche javascript.
Prends conscience que google n'interprète pas le javascript et donc en plus d'handicaper les visiteurs qui n'auraient pas js activé, les pages accessibles uniquement par un menu javascript ne pourront pas être référencées.

14 avr. 2010, 17:30

AB ++

et dans ton cas, tu dois faire en sorte que tout existe, (liens <a> pour supprimer entourant les images, ... /* si j'ai bien compris */) et ensuite, la couche de javascript viens "agrémenté" le confort de l'utilisateur ... ...

1. tu monte ton site
2. tu réfléchis à comment rendre plus agréable ce site pour certains utilisateurs (95% ^^ )

mais pas l'inverse

15 avr. 2010, 19:41

Je pense que je vais mettre un select à la place et que je vais essayer de le stylé avec jQuery à la façon que j'ai montré plus haut.

Suppresion d'élément avec jQuery

Qui est en ligne