Discussion :

[val69670]

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

[Doksuri]

ajoute ca a la fin de ta function

Code javascript :

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

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

[jreaux62]

Bonjour,

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

Code js :

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

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

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

[NoSmoking]

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 :

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

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

1
2
3
4
<button id="btn-ajouter">Ajouter</button>
<div id="conteneur">
  <!-- les éléments sera ajoutés ici -->
</div>