Retirer un champs dans un formulaire après clic Bouton

Version imprimable

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
 
<script>
var i = 1;
function textBoxCreateEmail(){
 
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Name", "email_" + i);
y.setAttribute("id", "email_" + i);
document.getElementById("new_email").appendChild(y);
 
var z = document.createElement("INPUT");
z.setAttribute("type", "button");
z.setAttribute("name", "emails_" + i);
z.setAttribute("id", "emails_" + i);
z.setAttribute("value", "Retirer");
document.getElementById("new_email").appendChild(z);
 
i++;
}    
</script>         
 
<input type="text" id="email" name="email">
<div id="new_email"></div>
<button onclick="textBoxCreateEmail()">Ajouter</button>

Bonjour

Je souhaiterais donner la possibilité de supprimer un champs après ajout. Pour cela, j'affiche un bouton "Retirer". Seulement, je ne vois pas comment procéder pour retirer le champs et le bouton...

Quelqu'un aurait-il une piste ? 8O

ajoute ca a la fin de ta function
Code:

1 2 3 4 z.addEventListener('click', () => { y.remove(); z.remove(); });

Bonjour,

on n'a pas besoin d'autant d'attributs.
ni de créer des "name" différents
ni de i
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function textBoxCreateEmail(){ var y = document.createElement("input"); y.setAttribute("type", "text"); y.setAttribute("name", "email[]"); document.getElementById("new_email").appendChild(y); var z = document.createElement("input"); z.setAttribute("type", "button"); z.setAttribute("value", "X"); document.getElementById("new_email").appendChild(z); z.addEventListener('click', () => { y.remove(); z.remove(); }); }
Code:

1 2 3 <input type="text" id="email" name="email[]"> <div id="new_email"></div> <button onclick="textBoxCreateEmail()">Ajouter</button>
A NOTER :

name="email[]" : on récupèrera alors TOUS les emails dans un array via $_POST['email'] (PHP)

[EDIT] Je viens de retrouver ce code, qui permet de cloner plusieurs champs :

https://codepen.io/jreaux62/pen/wvwMZwL

Bonjour,

il y a plusieurs façons d'ajouter des éléments avec bouton de suppression.

~~Utilisation de innerHTML~~ euh ! pardon j'ai rien dit
Utilisation des « templates string » pour la construction du HTML en utilisant la méthode insertAdjacentHTML pour l'injection dans le DOM.
Utilisation de <template> HTML avec ou sans clonage
Utilisation des méthodes traditionnelles createElement, append...plus verbeuses mais souvent plus abordables

C'est cette dernière que tu as privilégié et c'est bien !

Concernant l'ajout de tes éléments, dans ton cas un <input> et un <button>, une « pratique propre » est de mettre cela dans un « wrapper », il te suffit par la suite, lors du clic, de supprimer cet élément sans te soucier de plus.

Exemple de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function ajouterElement() { const elemDest = document.getElementById("conteneur"); const elemWrapper = document.createElement("P"); // on met ce que l'on veut dedans elemWrapper.textContent = "Place pour d'autres éléments"; // ajout du bouton de suppression const elemBtn = document.createElement("BUTTON"); elemBtn.textContent = "x"; // ajout action au clic elemBtn.addEventListener("click", () => { elemWrapper.remove(); }); // ajout du bouton au wrapper elemWrapper.append(elemBtn); // au final on ajout l'élément wrapper elemDest.append(elemWrapper); }
Pour faire tourner ce code il te faut au minimun le HTML suivant:
Code:

1 2 3 4 <button id="btn-ajouter">Ajouter</button> <div id="conteneur">  </div>