Suppression dynamique de bloc type

Version imprimable

17/02/2007, 21h53
DoubleU

Suppression dynamique de bloc type 

Bonsoir,

J'ai une fonction qui génère dynamiquement des paragraphes dans lequel j'ai 2-3 mots, puis un input, puis une image. Ce que je voudrais c'est supprimer un de ces paragraphes en cliquant sur l'image (qui joue un bete role de bouton).
En gros ca me donne ca:

Code:

Bla Bla<input type='file'><img src='...'>

Le problème c'est que je ne sais pas trop quoi mettre dans la fonction qu'appelle le bouton ^^

Au début j'avais pensé a mettre un id dans le qui s'auto incrémente au fur et a mesure des ajouts par rapport au nombre des ces et a faire la suppression sur cet id, mais ca risque de poser des problèmes si l'utilisateur a besoin de supprimer plusieurs paragraphes.

Genre j'ai 1 2 3. Je supprime le 2. Il me reste 3. J'en rajoute un et comme la taille est 2, il va me redonner un 1 3. Du coup j'aurai 1 3 3.

Si quelqu'un a des pistes, je suis preneur :mrgreen:
17/02/2007, 22h04
philippe123

de souvenir

met un id dans tes 
et puis apres tu modifie la valeur de leur style.display

mais c po sur du tout....
17/02/2007, 22h10
philippe123

desolé j'ai pas bien lu ta question

ca c'était pour masquer un element

pour supprimer fait une recherche sur

Code:

document.body.removeChild()

voila @+

bonsoir,

mémorise chaque paragraphe dans un tableau et affecte lui un indice :
si tab[i]=null le paragraphe n'existe pas (ou plus), si tab[i]!=null, l'élément existe.

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var tabPg = new Array();
var prefixPg = "id";  //prefixe utilise pour les id des paragraphes
 
function supprimerPg(objId)
{
  //alert(objId);
 
  var exp = new RegExp("[^"+prefixPg+"]","gi");
  var n = objId.substring(objId.search(exp), objId.length);
  
  document.getElementById("idConteneur").removeChild(document.getElementById(objId));
  tabPg[n] = null;
  
  alert("Vous supprimez le paragraphe "+n);
}
 
 
function creerPg()
{
 var pg, i, bt, sp;
 
 i=0;
 
 while (tabPg[i]!=null)
    i++;
 
 p = document.createElement("p");
 p.id = prefixPg+i;
 
 sp = document.createElement("span");
 sp.innerHTML = "Ceci est le paragraphe " + i+"&nbsp;&nbsp;";
 
 bt = document.createElement("input");
 bt.type = "button";
 bt.value = "Supprimer";
 bt.onclick = function(){supprimerPg(prefixPg+i)};
 
 this.p.appendChild(sp);
 this.p.appendChild(bt);
 
 tabPg[i] = this.p;
 
 document.getElementById("idConteneur").appendChild(this.p);
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="idConteneur">
   <input type="button" value="Créer un paragraphe"  onclick="creerPg()" />
   <hr />
</div>
 
</body>
 
</html>

Ajoute des paragraphes et supprime les dans l'ordre que tu veux.... Crée de nouveaux éléments et regarde leur indice ;)

18/02/2007, 09h03
ryan

Yop!

Si tu utilises une fonction pour créer tes paragraphes, tu définis une variable globale dont tu te sers comme id pour construire le nom du paragraphe.

A chaque création, tu incrémentes la variable, et comme cette variable n'est pas influencée par les suppressions, tu n'auras pas de doublon.
18/02/2007, 18h16
DoubleU

Impec, ca marche au poil ^^ Et la fonction de création est bien plus propre que celle que j'avais fait :king:

Que dire de plus sinon "merci".

Ryan >> Si j'ai bien tout compris (ce que j'espere ^^), c'est ce que fait le tableau dans la fonction qu'a posté Auteur. J'aurais appris des trucs sur ce coup la :mrgreen:
18/02/2007, 19h03
Auteur

Citation:

Envoyé par DoubleU

Ryan >> Si j'ai bien tout compris (ce que j'espere ^^), c'est ce que fait le tableau dans la fonction qu'a posté Auteur. J'aurais appris des trucs sur ce coup la :mrgreen:

Ryan propose d'incrémenter un compteur : il crée un nouvel id lorsqu'un nouvel élément est ajouté.

En ce qui me concerne je "recycle" (c'est dans l'air du temps) les id qui ne sont plus utilisés ou j'en créé un nouveau uniquement si nécessaire.
18/02/2007, 19h17
DoubleU

Oui oui, ce que je voulais dire c'est qu'au final ton tableau est global, un peu dans le meme genre que la variable de Ryan. C'est ca que je ne connaissais pas.

Suppression dynamique de bloc type <p>