Comment supprimer un tr parent

Question

MISE À JOUR 1 :

Je me demande si cela a quelque chose à voir avec le bouton étant à l'intérieur de l'élément qui est en train d'être supprimé, donc cela finirait par supprimer le bouton qui fait aussi la suppression ? Ce n'est peut-être pas le problème, mais je pensais juste à voix haute.

J'ai juste essayé :

$( "input.btnX" ).click(function(event) {
    alert("test");
});

et je n'obtiens pas d'alerte... Devrais-je utiliser live ou est-ce on maintenant car les boutons ainsi que le tableau sont générés dynamiquement.

QUESTION ORIGINALE :

J'ai un tableau (généré dynamiquement, donc je ne saurai pas combien de tr il y a dans tbody qui ressemble à ceci :

            col1
            col2

            col1
            col2

Comment supprimer le tr parent si un bouton x est cliqué ? Ainsi, dans cet exemple, si le bas x est cliqué, il devrait supprimer le bas tr.

J'ai essayé ceci :

$( "input.btnX" ).click(function(event) {
    $(this).parent('tr').remove();
});

Mais rien ne se passe.

Answer 1

Il suffit d'utiliser

    $( "input.btnX" ).click(function(event) {
    $(this).parent().parent().remove();
});

Ou

  $( "input.btnX" ).click(function(event) {
        $(this).closest("tr").remove();
    });

Car ce que vous faites, c'est aller au parent qui est le tr puis chercher un tr

Regardez un exemple ici http://jsfiddle.net/gYDUF/

Si votre tableau est rendu par javascript, vous devrez peut-être également modifier votre clic sur

$("input.btnX" ).live(click, function(){

     $(this).closest("tr").remove();
});

Answer 2

Essayer ceci :

$( "input.btnX" ).click(function(event) {
    $(this).closest('tr').remove();
});

Comme le tr n'est pas un parent direct de l'élément input.

MODIFIER : Si le tableau est construit dynamiquement, essayez d'utiliser

$( "input.btnX" ).live("click", function(event) {
    $(this).closest('tr').remove();
});

Answer 3

$( "input.btnX" ).on("click", function(event) {
    $(this).closest('tr').remove();
});

Cela devrait faire l'affaire et éviter l'utilisation obsolète de ".live()" (comme déjà mentionné).

Voir aussi ce jsfiddle

Answer 4

La méthode jQuery .live() a été dépréciée, et les gestionnaires d'événements délégués devraient maintenant utiliser .delegate() (pour les anciennes versions) ou .on().

La syntaxe pour utiliser .on() pour les événements délégués est la suivante:

$(document).on('click','input.btnX', function() {
    $(this).closest('tr').remove();
});

Notez que document ici peut également être remplacé par n'importe quel élément parent statique (des futurs boutons) qui existe au moment où le gestionnaire est lié.

Answer 5

Pas sûr que ce soit mieux, mais j'utilise parents()...

$('input.btnX').click(function() {
    $(this).parents('tr').remove();
});