Ajout et suppression input text

Version imprimable

Salut à tous
Voilà j ai un formulaire ou l utilisateur doit entrer des mot clé.
Il y a un input vide avec a côté un bouton ajouter.

J ai fait un script pour que quand il clique sur ajouter un nouvel input apparait avec ce qu'il a saisi et un bouton supprimer.
Pour le moment ça fonctionne
La ou je pèche c'est pour le supprimer
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function plus() { var champ = document.getElementById("choice"); var ajout = document.getElementById("form_input"); var count = document.getElementById("count"); //nouveau champ var new_champ = '<input type="text" name="formul[]" value="'+champ.value+'"> <button id="minus" form="other" onclick="minus(this.item);">-</button><br>'; champ.value = ''; count.value = count.value+1; var div = document.createElement('div'); div.innerHTML = new_champ; ajout.appendChild(div); } function minus(id) { var ajout = document.getElementById("form_input"); ajout.removeChild(ajout.childNodes.item(id)); }
Le html
Code:

1 2 3 4 5 6 <script src="js/form.js"></script> <form method="post"> <div id="form_input" class="f"></div> <input type="text" id="choice" name="formul[]"> <button id="plus" onclick="plus();" form="other">+</button> <input type="hidden" id="count" value="0"> </form>
Avec ceci, suivant ce que j ai supprimé précédemment, je ne supprime pas toujours le bon.
Normal car le count n est plus bon.

Auriez vous un conseil a me donner

Merci d avance

14/08/2019, 11h08
danielhagnoul

:salut:

Je viens de tester vos codes et je ne comprends pas votre problème !

Lorsqu'on clique sur le "+" un nouvel input apparaît et le "+" se transforme en "-".
Si on clique sur un "-" l'input concerné est détruit.

Donc votre code fonctionne correctement.
14/08/2019, 11h46
Invité

@danielhagnoul
Ce n'est pas le bon input (celui à coté du bouton "-") qui est supprimé, mais le 1er !

Je vois aussi PLUSIEURS autres problèmes :

1- count.
C'est un input.
Donc, count.value est une chaine.
Du coup, pour l'incrémentation, il faut remplacer :

Code:

count.value = count.value+1;

par

Code:

count.value = Number(count.value)+1;

Sinon, on obtient : '0', '01', '011', '0111', '01111',...

Cela dit, il n'est pas utilisé dans le reste du script ! :aie:

2- id="minus" :

Code:

var new_champ = '...<button id="minus" ...';

On NE peut PAS dupliquer un id, car il doit être UNIQUE.
Il faut appliquer une classe.

suggestion:

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
// raccourci pour nommer les éléments de la page
function q(tag){
	return document.getElementById(tag)
}
 
// activation du bouton "ajouter une ligne"
function init(){
	q("plus").addEventListener("click",plus_moins,false);
}
 
// création des nouveaux champs + bouton de suppression
function plus_moins(){
	// chaque ajout est inséré dans un div
	// ce qui permettra de supprimer directement le div
	let d=document.createElement("div");
	let ch=document.createElement("input");
	ch.type="text";
	ch.name="formul[]";
	let b=document.createElement("button");
	b.textContent= " - ";
	b.padding= "0px";
	b.title="supprimer ce champ";
	b.addEventListener	(// le bouton "-" supprime tout le div
		"click",(e) =>	{
			q("cadre").removeChild(e.target.parentElement);
			e.preventDefault()
				}
				);
	d.appendChild(ch);
	d.appendChild(b);
	q("cadre").appendChild(d);
 
}
 
window.addEventListener("load",init,true);

Code:

1
2
3
4
5
6
7
<form id="frm" action="">
	<p>
		<input id="plus" type="button" value="ajouter une ligne" />
	</p>
	<div id="cadre">
	</div>
</form>

En fait, count ne sert pas à grand chose...

17/08/2019, 23h22
colem

ouahh super javatwister
ton code est excellent, je l'ai un peu mis à ma sauce, mais excellent.

Merci à toi

Salut javatwister et la communauté également

je reviens vers toi car j'ai un problème avec le code que tu m'as donné.

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
function plus_moins(){
    let tr=document.createElement("div");
    tr.classList.add("tr");
    let le=document.createElement("div");
    le.classList.add("le");
    let ri=document.createElement("div");
    ri.classList.add("ri");
    let ch=document.createElement("select");
    ch.name='heure[]';
    let h=q('h').value;
    for (var i = 0; i < 24; i++) {
      var option = document.createElement("option");
      option.value = i;
      option.text = i;
      if(i == h){
        option.selected = "selected";
      }
      ch.appendChild(option);
    }
    q("h").selectedIndex=0;
    let cm=document.createElement("select");
    cm.name='minute[]';
    let m=q('m').value;
    for (var i = 0; i < 12; i++) {
      var option = document.createElement("option");
      option.value = i * 5;
      option.text = i * 5;
      if(i*5 == m){
        option.selected = "selected";
      }
      cm.appendChild(option);
    }
    q("m").selectedIndex=0;
 
    let b=document.createElement("button");
    b.className="fas fa-minus";
    b.title="Supprimer";
    b.addEventListener  (
    "click",(e) =>  {
      q("prog").removeChild(e.target.parentElement);
      e.preventDefault()
        }
        );
 
    let hide=document.createElement("input");
    hide.type='hidden';
    hide.name='ids[]';
    hide.value='';
 
    ri.appendChild(ch);
    ri.appendChild(document.createTextNode(" "));
    ri.appendChild(cm);
    ri.appendChild(document.createTextNode(" "));
    ri.appendChild(b);
    ri.appendChild(hide);
    tr.appendChild(le);
    tr.appendChild(ri);
    q("prog").appendChild(tr);
 
}

voilà avec ce code ça me crée un truc du genre

Code:

1
2
3
4
5
6
7
<div id="prog">
    <dir class="tr">
        <div class="le"></div>
        <div class="ri">....</div>
    </div>
    ....
</div>

le souci est que quand je clique sur - ça ne fonctionne pas.

si je mets

Code:

1
2
3
4
<div id="prog">
    <div class="ri">....</div>
    ....
</div>

ça fonctionne mais du coup coté visuel c'est plus ça

peux-tu m'aider

EDIT: c'est bon j'ai trouvé

Code:

q("prog").removeChild(e.target.parentElement.parentElement);

22/11/2019, 12h04
javatwister

bien vu ;)