Supprimer l'élément parent et tous les enfants

J'ai donc une table, et chaque fois que le bouton est soumis il ajoute une ligne à la table avec 4 colonnes, je place un bouton de suppression dans chaque rangée. Mon but est de pouvoir effacer toute la ligne, mais quand j'appuie dessus, je supprime seulement le bouton. Comment puis-je supprimer la ligne entière?Supprimer l'élément parent et tous les enfants

$(this).parent().remove()

J'ai essayé, mais ça ne marche pas, le td est directement dans le tr il devrait accéder à la tr et le supprimer, mais la ligne existe toujours.

Source

2013-02-03 Jupiter

Montrez-nous plus de code. Mais je soupçonne que vous avez ajouté cela sur l'événement de clic du bouton. Si oui, le parent du bouton est le TD, qui est supprimé, non? – mrunion

correct, j'ai trouvé le problème juste moi ne réalisant pas je l'ai placé dans un td aussi ...erreur stupide – Jupiter

Vous voulez sélectionner l'élément le plus proche tr, pas le parent immédiat. Sans voir votre liaison d'événement, je suppose que $(this) est le bouton, et que $(this).parent() est le <td>. Au lieu de cela, vous devriez essayer:

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

Ou, si vous pouvez garantir une hiérarchie spécifique de tr>td>button, vous pouvez alors utiliser:

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

Je déconseillons fortement en utilisant ce dernier format, car il est bien couplé à la structure du HTML. Si votre code HTML commence comme:

<tr> 
    <td> 
     <button>Example</button> 
    </td> 
</tr>

et modifications ultérieures:

<tr> 
    <td> 
     <div class="wrapper"> 
      <button>Example</button> 
     </div> 
    </td> 
</tr>

en utilisant closest('tr') continuera à travailler, mais en utilisant parent().parent() cassera.

Relatif à votre problème secondaire de ne pas avoir déclenché d'événements. Si vous liez des événements avec $('.foo button').click(removeRow); (où .foo correspond à l'élément table), les événements ne s'appliqueront pas aux éléments button nouvellement créés. Au lieu de cela, vous devriez utiliser la forme de on-délégation de l'événement (ou simplement delegate si vous utilisez une ancienne version de jQuery):

$('.foo').on('click', 'button', removeRow);

Ce stockerait l'événement de liaison sur l'élément table, et quand le rappel est appelée, elle vérifie si l'élément qui a déclenché l'événement spécifié correspond au sélecteur spécifié dans le second argument (dans ce cas, 'button') s'il correspond, il déclenche le gestionnaire spécifié (dans ce cas, removeRow) avec l'élément correspondant en tant que contexte (dans le gestionnaire, this pointe toujours vers un élément button).

Source

2013-02-03 05:55:12 zzzzBov

AHH Je suis un idiot ty tellement cela fait tellement de sens. Et oui je préfère utiliser de toute façon c'est beaucoup plus sûr. – Jupiter

ok juste fait quelques tests et il ne semble toujours pas travailler en utilisant $ (this) .closest ('tr'). Remove(); il ressemble à et il ne fonctionne pas – Jupiter

@Jupiter, vous êtes certain que le rappel d'événement est tiré du tout? Avez-vous vérifié la console de débogage pour les erreurs possibles (telles que tyops)? – zzzzBov

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

Source

2013-02-03 05:54:54

Je suppose votre code ressemble à ceci:

<table> 
    <tr> 
     <td>Column</td> 
     <td><button></button></td> 
    </tr> 
</table>

Ainsi, votre $(this).parent() est le <td>, pas le <tr>. Vous avez besoin d'un autre parent():

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

Source

2013-02-03 05:55:58 Martin

Supprimer l'élément parent et tous les enfants

Répondre

Questions connexes