Masquer une DIV en particulier dans une boucle JQUERY

Version imprimable

Bonjour à tous,

Je génère une liste de sous catégories. Je souhaite masquer la div conteneur de catégorie lorsque je fais une action sur le bouton de suppression.

Dans mon exemple ci-dessous, je souhaite masquer la div <div id="SSCform-group" rel="271">.
lorsque je clique sur le bouton

Code:

<button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button>

je tâche de récupérer l'identifiant de ma div souhaité par le "REL". Dans la console, je vois bien l'identifiant souhaité. Le problème est que la DIV "SSCform-groupe" masqué est toujours la première de ma liste est non celle correspondant à son identifiant.

Quelqu'un verrait-il ce qui cloche dans ma fonction ?

Ma structure HTML
Code:

1 2 3 4 5 6 7 <div id="AffSSCat" name="AffSSCat"> <div id="SSCform-group" rel="271"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[271]" name="editSousCategoriesName[271]" placeholder="SousTestH16" value="SousTestH16" type="text"><input name="editSousCategoriesId[271]" id="editSousCategoriesId[271]" value="271" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-trash"></i></a></div></div> <div id="ConfSousCat271" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-remove-sign">Annuler</i> </a> <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div> </div>
Ma fonction JS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function removeSousCategories(souscategoriesId = null) { if(souscategoriesId) { $('#SSCform-group').each(function(index) { // A travailler pour récupérer l'identifiant [] if ($(this).attr("rel") == souscategoriesId) { $(this).hide(100); } else { $(this).hide(2000); } });

05/04/2018, 08h02
mathieu

puisque vous connaissez l'identifiant "SSCform-group" de l'élément, vous n'avez pas besoin d'utiliser "each" puisqu'il n'y a qu'un élément.
à quoi sert le numéro 271 de l'exemple, comment sont construit les autres catégories ?

Bonjour Mathieu,

Le numero 271 est l'identifiant de la sous-catégorie que je souhaite dans l'exemple masqué.

La boucle sur les sous catégories est une structure de ce genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="AffSSCat" name="AffSSCat">
 
<div id="SSCform-group" rel="271"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[271]" name="editSousCategoriesName[271]" placeholder="SousTestH16" value="SousTestH16" type="text"><input name="editSousCategoriesId[271]" id="editSousCategoriesId[271]" value="271" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat271" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
 
 
<div id="SSCform-group" rel="272"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[272]" name="editSousCategoriesName[272]" placeholder="SousTestH17" value="SousTestH17" type="text"><input name="editSousCategoriesId[272]" id="editSousCategoriesId[272]" value="272" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat272')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat272" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat272')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="272" data-loading-text="Loading..." onclick="removeSousCategories('272')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
 
 
<div id="SSCform-group" rel="273"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[273]" name="editSousCategoriesName[273]" placeholder="SousTestH18" value="SousTestH18" type="text"><input name="editSousCategoriesId[273]" id="editSousCategoriesId[273]" value="273" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat273')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat273" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat273')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="273" data-loading-text="Loading..." onclick="removeSousCategories('273')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
<div> ...</div>
 
</div>

Bonjour,
il te faut commencer par mettre ton code HTML en conformité
Code:

1 2 3 4 5 6 <div id="SSCform-group" rel="271">  <div id="SSCform-group" rel="272">  <div id="SSCform-group" rel="273"> 
Une ID doit être UNIQUE dans la page !

Utilise jQuery pour de bon

Code:

<button type="button" class="btn btn-primary removeSousCategoriesBtn" ... onclick="removeSousCategories('272')">
Code:

1 2 3 $(".removeSousCategoriesBtn").on("click", function(){ // ton code ICI, là tu peux chercher son parent ! });

J'ai résolu mon problème en remplacant l'ID par une CLASS
<div class="SSCformGroup" rel="'+response.souscategories[i].souscategories_id +'" .

Mon appel
onclick="removeSousCategories('+response.souscategories[i].souscategories_id +')" .

Et ma fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function removeSousCategories(souscategoriesId = null) { if(souscategoriesId) { $('.SSCformGroup').on("click", function() { // A travailler pour récupérer l'identifiant [] if ($(this).attr("rel") == souscategoriesId) { $(this).hide(100); } else { $(this).hide(2000); } });
Cependant, je ne peux exécuter deux fois de suite la fonction...
Y'a t-il une syntaxe à utiliser pour faire une sorte de Reset de la fonction lorsque celle-ci a été utilisé ?

06/04/2018, 15h07
NoSmoking

Citation:

Cependant, je ne peux exécuter deux fois de suite la fonction...

si j'ai bien compris une fois que tu as cliqué sur le bouton tu masque le conteneur dans lequel se trouve ton bouton ce qui le rend par le fait inaccessible.

Concernant ta fonction je dois admettre que j'ai un doute sur ce que tu veux réellement faire !
06/04/2018, 21h50
karpe

1 pièce(s) jointe(s)

Ce conteneur est présent dans chaque DIV m'affichant une sous catégorie, avec à chaque fois un appel à la fonction incrémenté du numéro de sous catégorie :onclick="removeSousCategories(329)" .
En action, je clique sur le bouton "supprimer". Ensuite la DIV <div class="SSCformGroup" rel="329"> ...</div> doit se masquer, puis la ligne est supprimé en base et enfin je fais une MAJ de ma table AJAX.
Seulement, l'opération ne s’exécute qu'une seule fois via la fonction. La deuxième fois c'est carrément toute la DIV qui disparait.
Visuellement cela donne ça (dans mon exemple, le"SoustestJ5" correspond à la sous-categorie 329 :
Pièce jointe 367988

voilà, j’espère que celà te permettra de mieux comprendre ma finalité.

Je me suis auto-resolu.
Avec un "show" à la place du "hide" c'est mieux !

Code:

1
2
3
4
5
6
 if ($(this).attr("rel") == souscategoriesId) {
               $(this).hide(100);
          }
          else {
               $(this).show(2000);
          }