Duplication / Suppression d'un contenu

**altimeuler** · 27/03/2009, 21h53

Bonjour à tous et à toutes,

Je suis en train de chercher à faire un bouton qui me dupliquerait le contenu d'un <div>. Ne connaissant pas (et ne comprend pas) grand chose au Javascript, j'ai essayé de chercher à droite a gauche mais sans trouver vraiment ce que je veux.
J'ai donc essayer de piquer des bouts de code à droite à gauche mais là je bloque sans comprendre.

Avec ce code, je peux dupliquer le contenu de mon <div> mais quand je veux en effacer 1, il me les efface tous.

Quelqu'un pourrait il me donner un coup de main (si il y a des choses abbérantes, il ne faut pas hésiter non plus ^^)

Merci par avance.

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
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<script type="text/javascript">
var _copyCounter = new Array();
function CopyInto(strSourceId, strTargetId)
{
        if (!_copyCounter[strSourceId])
                _copyCounter[strSourceId] = 2;
        
        var objSource = document.getElementById(strSourceId);
        var objTarget = document.getElementById(strTargetId);
        var objClone = objSource.cloneNode(true);
 
        var arrElements = GetAllElements(objClone, new Array("input", "select", "textarea"));
        for (var i = 0; i < arrElements.length; i++)
                arrElements[i].name = arrElements[i].name + "_" + _copyCounter[strSourceId];
 
        objTarget.appendChild(objClone);
        _copyCounter[strSourceId] = _copyCounter[strSourceId] + 1;
 
}
 
function GetAllElements(oParent, arrNodeNames)
{
        var arrAllElements = new Array();
        if (typeof oParent == "string")
                oParent = document.getElementById(oParent);
        for (var i = 0; i < arrNodeNames.length; i++)
        {
                var elements = oParent.getElementsByTagName(arrNodeNames[i]);
                for (var j = 0; j < elements.length; j++)
                        arrAllElements[arrAllElements.length] = elements[j];
        }
        return arrAllElements;
}
</script>
</head>
<body>
<form method=GET action=test.php>
<div id="TestDiv1">
		<INPUT class='form_date' type=text name="etincelle_d">&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
		<select name="etincelle_h" class="form_heure">
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>&nbsp;:
		<select name="etincelle_m" class="form_heure">
			<option value='0'>00</option>
			<option value='15'>15</option>
			<option value='15'>30</option>
			<option value='15'>45</option>
		</select>
</div>
<div id="Separation"></div>
<button type="button" onclick="CopyInto('TestDiv1', 'Separation');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<INPUT type="submit" value="Envoyer">
</form>
</body>
</html>

**emmanuel.remy** · 27/03/2009, 22h56

Je n'ai pas touché à la démarche de ton code, juste ajusté pour le delete

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
<html>
<head>
<script type="text/javascript">
var _copyCounter = new Array();
 
//le tableau des noeuds créés
var _newNodes = [];
 
function CopyInto(strSourceId, strTargetId)
{
	if (!_copyCounter[strSourceId])
		_copyCounter[strSourceId] = 2;
 
	var objSource = document.getElementById(strSourceId);
	var objTarget = document.getElementById(strTargetId);
	var objClone = objSource.cloneNode(true);
 
	var arrElements = GetAllElements(objClone, new Array("input", "select", "textarea"));
	for (var i = 0; i < arrElements.length; i++)
		arrElements[i].name = arrElements[i].name + "_" + _copyCounter[strSourceId];
 
	objTarget.appendChild(objClone);
	_copyCounter[strSourceId] = _copyCounter[strSourceId] + 1;
        //on ajoute le noeud créé au tableau
        _newNodes.push(objClone);
 
}
 
function GetAllElements(oParent, arrNodeNames)
{
	var arrAllElements = new Array();
	if (typeof oParent == "string")
		oParent = document.getElementById(oParent);
	for (var i = 0; i < arrNodeNames.length; i++)
	{
		var elements = oParent.getElementsByTagName(arrNodeNames[i]);
		for (var j = 0; j < elements.length; j++)
			arrAllElements[arrAllElements.length] = elements[j];
	}
	return arrAllElements;
}
//fonctio qui supprime le dernier noeud dupliqué
function deleteOne() {
	var d= _newNodes.length;
 
        if (d>0) {
                var node = _newNodes[d-1];
                node.parentNode.removeChild(node);
                delete node;
                _newNodes.pop();
	}
}
 
 
</script>
</head>
<body>
<form method=GET action=test.php>
<div id="TestDiv1">
		<INPUT class='form_date' type=text name="etincelle_d">&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
		<select name="etincelle_h" class="form_heure">
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>&nbsp;:
		<select name="etincelle_m" class="form_heure">
			<option value='0'>00</option>
			<option value='15'>15</option>
			<option value='15'>30</option>
			<option value='15'>45</option>
		</select>
</div>
<div id="Separation"></div>
<button type="button" onclick="CopyInto('TestDiv1', 'Separation');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="deleteOne();" />
<INPUT type="submit" value="Envoyer">
</form>
</body>
</html>

ERE

**Ozareff** · 27/03/2009, 23h11

Tiens, ça te dépannera surement.

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
<html>
<head>
<script type="text/javascript">
function copy()
{
	var liste = document.getElementById('une_liste');
	var premier_element = document.getElementById('premier_element').innerHTML;
	var nouveau_li = document.createElement('li');
	nouveau_li.innerHTML = premier_element;
	liste.appendChild(nouveau_li);
}
 
function remove()
{
	document.getElementById("une_liste").removeChild(document.getElementById("une_liste").lastChild);
}
</script>
</head>
<body>
<form method="GET" action="test.php">
<ul id="une_liste">
	<li id="premier_element">
		<input class="form_date" type="text" name="etincelle_d" />&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
		<select name="etincelle_h" class="form_heure">
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>&nbsp;:
		<select name="etincelle_m" class="form_heure">
			<option value='0'>00</option>
			<option value='15'>15</option>
			<option value='30'>30</option>
			<option value='45'>45</option>
		</select>
	</li>
</ul>
<input type="button" value="Cloner" onclick="copy();" />
<input type="button" value="Retirer un champ" onclick="remove();" />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>

Prochaine étape : ajouter dynamiquement un identifiant différent à tes champs lors de leur création (grâce à la méthode setAttribute par exemple) pour le traitement.

**altimeuler** · 28/03/2009, 12h44

Tout d'abord, merci à vous 2, vraiment.

Le code de emmanuel.remy me permet de garder la premiere ligne sans pouvoir l'effacer, ce que je prefere. Je ne m'y connais vraiment pas assez pour pouvoir exploiter correctement celui de Ozareff (dur dur de ne pas etre un développeur ^^)
Mais j'ai encore une question.
Voila, si je met x fois un contenu différent, le bouton de suppression me supprime le dernier créé. Bon ça je pense comprendre pourquoi... le problème, c'est que je n'arrive pas a faire en sorte que le bouton de suppression me supprime la ligne juste au dessus de lui.

Je ne copierais pas mes essais foireux (qui au mieux efface tout... ^^). Mais si quelqu'un pouvait me depanner, ce serait tres gentil.

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
101
102
103
104
105
106
107
108
109
110
<html>
<head>
<script type="text/javascript">
var _copyCounter = new Array();
 
//le tableau des noeuds créés
var _newNodes = [];
 
function CopyInto(strSourceId, strTargetId)
{
	if (!_copyCounter[strSourceId])
		_copyCounter[strSourceId] = 2;
 
	var objSource = document.getElementById(strSourceId);
	var objTarget = document.getElementById(strTargetId);
	var objClone = objSource.cloneNode(true);
 
	var arrElements = GetAllElements(objClone, new Array("input", "select", "textarea"));
	for (var i = 0; i < arrElements.length; i++)
		arrElements[i].name = arrElements[i].name + "_" + _copyCounter[strSourceId];
 
	objTarget.appendChild(objClone);
	_copyCounter[strSourceId] = _copyCounter[strSourceId] + 1;
        //on ajoute le noeud créé au tableau
        _newNodes.push(objClone);
 
}
 
function GetAllElements(oParent, arrNodeNames)
{
	var arrAllElements = new Array();
	if (typeof oParent == "string")
		oParent = document.getElementById(oParent);
	for (var i = 0; i < arrNodeNames.length; i++)
	{
		var elements = oParent.getElementsByTagName(arrNodeNames[i]);
		for (var j = 0; j < elements.length; j++)
			arrAllElements[arrAllElements.length] = elements[j];
	}
	return arrAllElements;
}
//fonctio qui supprime le dernier noeud dupliqué
function deleteOne() {
	var d= _newNodes.length;
 
        if (d>0) {
                var node = _newNodes[d-1];
                node.parentNode.removeChild(node);
                delete node;
                _newNodes.pop();
	}
}
 
 
</script>
</head>
<body>
<form method=GET action=test.php>
<div id="TestDiv1">
		<INPUT class='form_date' type=text name="etincelle_d">&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
		<select name="etincelle_h" class="form_heure">
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>&nbsp;:
		<select name="etincelle_m" class="form_heure">
			<option value='0'>00</option>
			<option value='15'>15</option>
			<option value='15'>30</option>
			<option value='15'>45</option>
		</select>
</div>
<div id="Separation"></div>
<button type="button" onclick="CopyInto('TestDiv1', 'Separation');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="deleteOne();" />
 
<div id="TestDiv2">
		exemple 1<INPUT class='form_date' type=text name="atelier_d">
		exemple 2<INPUT class='form_date' type=text name="exemple">
</div>
<div id="Separation2"></div>
<button type="button" onclick="CopyInto('TestDiv2', 'Separation2');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="deleteOne();" />
 
 
<INPUT type="submit" value="Envoyer">
</form>
</body>
</html>

**emmanuel.remy** · 28/03/2009, 14h57

Adapté...

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<html>
<head>
<script type="text/javascript">
var _copyCounter = new Array();
 
//le tableau des noeuds créés
var _newNodes = [];
 
function CopyInto(strSourceId, strTargetId)
{
	if (!_copyCounter[strSourceId])
		_copyCounter[strSourceId] = 2;
 
	var objSource = document.getElementById(strSourceId);
	var objTarget = document.getElementById(strTargetId);
	var objClone = objSource.cloneNode(true);
 
	var arrElements = GetAllElements(objClone, new Array("input", "select", "textarea"));
	for (var i = 0; i < arrElements.length; i++)
		arrElements[i].name = arrElements[i].name + "_" + _copyCounter[strSourceId];
 
	objTarget.appendChild(objClone);
	_copyCounter[strSourceId] = _copyCounter[strSourceId] + 1;
        //on ajoute le noeud créé au tableau
        //et on crée le tableau avec une clé liée au nom de la zone où
        //prend place la copie ("separation"  par ex)
        if (! _newNodes[strTargetId]) _newNodes[strTargetId]=[];  
        //on ajoute la référence à la copie
        _newNodes[strTargetId].push(objClone);
 
}
 
function GetAllElements(oParent, arrNodeNames)
{
	var arrAllElements = new Array();
	if (typeof oParent == "string")
		oParent = document.getElementById(oParent);
	for (var i = 0; i < arrNodeNames.length; i++)
	{
		var elements = oParent.getElementsByTagName(arrNodeNames[i]);
		for (var j = 0; j < elements.length; j++)
			arrAllElements[arrAllElements.length] = elements[j];
	}
	return arrAllElements;
}
//fonction qui supprime le dernier noeud dupliqué
//pour la zone de copie nommée "strTargetId" ("separation"  par ex)
function deleteOne(strTargetId) {
	//si rien à supprimer, on quitte
  if (!_newNodes[strTargetId]) return;
  //sinon, c'est parti !
  var d= _newNodes[strTargetId].length;
  if (d>0) {
          //on prend le dernier copier
          var node = _newNodes[strTargetId][d-1];
          //on le supprime physiquement
          node.parentNode.removeChild(node);
          //on le libère de la mémoire
          delete node;
          //on libère la place dans le tableau
          _newNodes[strTargetId].pop();
	}
}
 
 
</script>
</head>
<body>
<form method=GET action=test.php>
<div id="TestDiv1">
		<INPUT class='form_date' type=text name="etincelle_d">&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
		<select name="etincelle_h" class="form_heure">
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>&nbsp;:
		<select name="etincelle_m" class="form_heure">
			<option value='0'>00</option>
			<option value='15'>15</option>
			<option value='15'>30</option>
			<option value='15'>45</option>
		</select>
</div>
<div id="Separation"></div>
<button type="button" onclick="CopyInto('TestDiv1', 'Separation');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="deleteOne('Separation');" />
 
<div id="TestDiv2">
		exemple 1<INPUT class='form_date' type=text name="atelier_d">
		exemple 2<INPUT class='form_date' type=text name="exemple">
</div>
<div id="Separation2"></div>
<button type="button" onclick="CopyInto('TestDiv2', 'Separation2');">Cloner</button>
<input type="button" value="Retirer un champs" onclick="deleteOne('Separation2');" />
 
 
<INPUT type="submit" value="Envoyer">
</form>
</body>
</html>

ERE