Supprimer un élément cloné et appeler une fonction via une variable

Bonsoir tout le monde,

Je clone cet objet avec jQuery :

Code:

---

1 2 3 4 5 6 7 8

var selct = '';   selct += '<div class="form-group col-md-3 id="btnRemove">'; selct += '<br>'; selct += '<div class="" style="margin-top:9px;padding-left: 15px;">'; selct += ' <input type="button" class="btn btn-danger remove_btn" id="her" value="-"><br>'; selct += '</div>'; selct += '</div>';

---

avec ce code :

Code:

---

$("#drug_div").clone().attr({'id': 'drug_div' + cpt}).appendTo('#countDrug') .after(selct); // Add field html

---

J'ai deux questions :

1- Comment je pourrais supprimer le clone après l'avoir clôné avec le code ci-dessus ?

2- J'essaie de lancer une fonction (enregistrée dans une variable) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var disable_option = $('#countHerb').on('change', 'select',function() { alert("dans disable"); // enable all options $('option[disabled]').prop('disabled', false); $('select').each(function() { $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); }); });

---

je l'appelle ci-dessous dans le code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$(addBtn).click(function() { $(this).val("+"); // On met un getter sur l'input pour gerer le message d'erreure if(cpt < maxField) { $("#herb_div").clone().attr({'id': 'herb_div' + cpt}).appendTo('#countHerb') .after(selct); // Add field html cpt++; // Increment field counter disable_option(); }else { $(this).val("Maximum 5 plantes").prop("disabled",true); // on desactive l'input + } });

---

Mais j'ai ce message d'erreur :

Citation:

---

ReferenceError: disable_option is not defined

---

Pourtant, la fonction est créée avant l'appel...

Merci d'avance pour l'aide.

Bonjour,

Code:

---

var disable_option = $('#countHerb').on(....)

---

Là tu stock un objet jQuery dans ta variable et pas une fonction, si tu veux le faire, il faut mettre ceci :

Code:

---

1 2	var disable_option =function(){/*le code de la fonction ici*/}

---

Puis tu fais appel à la fonction dans le change comme ça ( et sans les parenthèses ):

Code:

---

1 2	$('#countHerb').on('change', 'select',disable_option);

---

Pour la question 1, je ne l'ai pas vraiment compris.

Tu veux supprimer tout le conteneur $("#drug_div").clone() ? pourquoi l'avoir ajouter alors :koi:?

Bonjour Toufik,

Grand merci pour ta réponse rapide.

Tu as bien sûr raison, où ais-je la tête, là, j'avais juste un objet jQuery dans ma variable... merci.

Par contre, cela ne fonctionne toujours pas, je me demande si ce n'est pas parce que la fonctionne ne travaille sur l'évent change de ma liste déroulante ?

à partir de la ligne 128 :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready(function() { var disable_option = function() {   $('#countHerb').on('change', 'select',function() { alert("dans disable"); // enable all options $('option[disabled]').prop('disabled', false);   $('select').each(function() { $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); });     });   }

---

Et je l'appelle à la ligne 177, mais sur un clic d'un bouton :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$(addBtn).click(function() { $(this).val("+"); // On met un getter sur l'input pour gerer le message d'erreur if(cpt < maxField) { $("#herb_div").clone().attr({'id': 'herb_div' + cpt}).appendTo('#countHerb') .after(selct); // Add field html cpt++; // Increment field counter disable_option(); }else { $(this).val("Maximum 5 plantes").prop("disabled",true); // on desactive l'input + } });

---

Pour le second problème, je t'explique, je pense que tu vas comprendre pourquoi je souhaite le retirer :

Je propose au visiteur de choisir une ou plusieurs plantes pour une recherche :

Pièce jointe 574452

Il se peut que le visiteur décide de rechercher sur 3 plantes ou 2 plantes et donc de vouloir supprimer les clones qu'il a fait en cliquant sur le bouton.

L'idée est de par exemple pouvoir revenir à 3 plantes comme l'image ci-dessous :

Pièce jointe 574453

Merci d'avance pour ton aide.

Bonjour,

Ce n'est pas comme ça, il faut l'écrire comme suite :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).ready(function(){ var disable_option = function(){ alert("dans disable"); // enable all options $('option[disabled]').prop('disabled', false);   $('select').each(function(){ $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); });   };//fin function $('#countHerb').on('change', 'select',disable_option); });//fin document.ready

---

Puis pour la question 1, tu peux supprimer le conteneur en cliquant sur le bouton moins "-" avec $.remove(), mais il va falloir le cibler à partir du bouton moins "-" sur lequel tu cliques.

Montre le code html d'un seul conteneur qui contient le select et le bouton "-" pour mieux t'aider...

Rebonjour Toufik,

Merci pour ta réponse.

Pour le problème n°1, ça fonctionne en effet beaucoup mieux, je t'en remercie.

Pour le 2e problème, supprimer une partie du site clonée, voici le code HTML généré (je dois modifier la première ligne qui est erronée) :

Code:

---

1 2 3 4 5 6 7

<div class="form-group col-md-3 id=" btnremove"=""> <br> <div class="" style="margin-top:9px;padding-left: 15px;"> <input type="button" class="btn btn-danger remove_btn" id="her" value="-"> <br> </div> </div>

---

et ce code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="form-group col-md-6" id="herb_div1"> <label class="form-check-label"><strong><h5>Plante *</h5></strong></label> <select name="herb[]" id="herb" class="form-control"> <option value="0" disabled="">Veuillez choisir une plante</option> <option value="3" disabled="">Ailerer</option> <option value="6">Audrey II</option> <option value="7">Audrey III</option> <option value="8" disabled="">Hibuscus</option> <option value="9">n'importe quoi</option> <option value="4" disabled="">Tea tree</option>` <option value="5" disabled="">Testons pas nnnneeee</option> </select>     </div>

---

Encore merci pour tout.

Bonjour,

D'après ce que je vois, tu as deux div sur chaque ligne, le premier contient le select et le deuxième contient le bouton "-".

Donc l'idée est de supprimer le div qui précède le parent du bouton "-" ET le parent du bouton sur lequel tu cliques (tu peux remplacer "body" par un conteneur statique):

Code:

---

1 2 3 4 5

$('body').on("click",'.remove_btn',function(){ $(this).closest(".col-md-3").prev(".col-md-6").remove();//supprimer le div qui précède le parent du bouton "-" $(this).closest(".col-md-3").remove();//supprimer le div parent du bouton "-" });

---

Fais attention aux id="btnremove" et id="her", car à chaque fois tu les clones, leurs id aussi sont clonés alors qu'un id doit être unique dans une page html.

à ta place j'utiliserai seulement des class.

Rebonjour Toufik,

Je suis tout simplement IMPRESSIONNE par tes connaissances et tes compétences 8O

Milles mercis pour ton aide, cela semble très bien fonctionner.

Si je peux faire quelque chose pour toi, n'hésite pas.

Encore merci pour ton sérieux.

bee