Supprimer un élément ajouté grâce à .after()

1 pièce(s) jointe(s)

Bonjours / Bonsoir à tous !
Alors voilà je vous explique mon petit problème qui dure depuis 2 jours et je ne cesse de m'arracher les cheveux et ne peut trouver de solutions mise appart je l'éspère ici !
J'ai donc un tablau comme suit :

Pièce jointe 170487

Lorsque je clique sur le bouton "+" cela m'ajoute bien une nouvelle ligne sur mon tableau grâce à :
Code:

1 2 $('.plusTd1').on('click',function() { $('#sformadd').after('<tr><td><input type="text" name="nom[]" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="id[]" size="15" id="text1" value="" class="remplit" maxlength="20"> </td> <td><input type="text" size="15" name="type[]" id="text2" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="table[]" size="15" id="text3" value="" class="remplit" maxlength="20"> </td><td class="controlTd2"> <div class="settingsIcons"></div> </td> </tr> ');
Or je veut lorsque je clique sur la petite croix rouge, pouvoir supprimer ce que je vient d'ajouter grâce a ".after()" autrement dit, supprimer toute la ligne du tableau et par conséquent faire remonter les autres ( Celle qui serait en dessous ) logique.

Voici le petit bout de code entier et un éxemple adapté ne serait pas sans refus ! :
Code:

1 2 3 4 5 6 7 8 9 10 jQuery(document).ready(function(){ $('.plusTd1').on('click',function() { $('#sformadd').after('<tr><td><input type="text" name="nom[]" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="id[]" size="15" id="text1" value="" class="remplit" maxlength="20"> </td> <td><input type="text" size="15" name="type[]" id="text2" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="table[]" size="15" id="text3" value="" class="remplit" maxlength="20"> </td><td class="controlTd2"> <div class="settingsIcons"></div> </td> </tr> '); }); }); jQuery(document).ready(function(){ $('.controlTd2').on('click',function() { $('#sformadd').detach('<tr><td><input type="text" name="nom[]" size="15" id="text0" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="id[]" size="15" id="text1" value="" class="remplit" maxlength="20"> </td> <td><input type="text" size="15" name="type[]" id="text2" value="" class="remplit" maxlength="20"><br></td> <td><input type="text" name="table[]" size="15" id="text3" value="" class="remplit" maxlength="20"> </td><td class="controlTd2"> <div class="settingsIcons"></div> </td> </tr> '); }); });
NB : J'ai essayais pas mal de choses : .remove(LE TEXTE HTML QUI EST DANS .AFTER()) ; .hide(IDEM) ; .empty(..) ; .detach (..)
J'en conclut que le problème ne vient pas de là ?

Merci beaucoup à tous !

Bonjour,
le parent du td est justement le tr à supprimer :
Code:

1 2 3 $('.controlTd2').on('click',function() { $(this).parent().remove(); });

Ouw c'est parfait ça marche niquel, juste une petite explication sur le .parent() dans ce cas là ?
Merci beaucoup !

Citation:

Envoyé par dayou05

juste une petite explication sur le .parent() dans ce cas là ?

$('.controlTd2') désigne la cellule TD qui contient ta croix, ajouter un .parent() permet de remonter à l'élément DOM parent (en l'occurence le TR qui contient le TD sur lequel tu viens de cliquer). Remove retire tout le TR (donc toute la ligne).

Et bien merci beaucoup à vous tous, j'ai compris c'est le principal !
Sujet résolu. :roll:8-):calim2::P:oops:

A noter que selon moi

Code:

$(this).parent('tr').remove();

serait plus approprié Si le code évolue, par exemple s'il décide d'utiliser une image ou un bouton, ça fonctionnera toujours ;)