Discussion :

[dayou05]

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 :



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

Code :

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

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 :

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

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 !

[Invité]

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

Code :

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

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

[dayou05]

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

[Chen norris]

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).

[dayou05]

Et bien merci beaucoup à vous tous, j'ai compris c'est le principal !
Sujet résolu.

[Bovino]

A noter que selon moi

Code :

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

$(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