Suppression dynamique de bloc type

**DoubleU** · 17/02/2007, 21h53

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 :

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

<p><span>Bla Bla</span><input type='file'><img src='...'></p>

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

**philippe123** · 17/02/2007, 22h04

de souvenir

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

mais c po sur du tout....

**philippe123** · 17/02/2007, 22h10

desolé j'ai pas bien lu ta question

ca c'était pour masquer un element

pour supprimer fait une recherche sur

Code :

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

document.body.removeChild()

voila @+

**Auteur** · 18/02/2007, 00h34

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 html :

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
 
<!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

**ryan** · 18/02/2007, 09h03

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.

**DoubleU** · 18/02/2007, 18h16

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

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

**Auteur** · 18/02/2007, 19h03

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

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.

**DoubleU** · 18/02/2007, 19h17

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>

JavaScript

Discussions similaires

Partager

Partager