supprimer la table rangée

Question

J'ai une table comme ceci:

<table> 
    <tr> 
    <td>foo</td> 
    <td><button>delete</delete></td> 
    </tr> 
    <tr> 
    <td>foo</td> 
    <td><button>delete</delete></td> 
    </tr> 
</table> 

Je veux utiliser JQuery installer un gestionnaire de clic sur les boutons de suppression de telle sorte qu'il supprime la ligne courante lorsque vous cliquez dessus

Answer 1

Donnez une classe , par exemple, « supprimer » aux boutons de suppression, puis utilisez ceci:

$("button.delete").click(function() { 
    $(this).closest("tr").remove(); 
}); 

Sinon, si vous ne pouvez pas ajouter la classe, vous pouvez utiliser le sélecteur :contains:

$("button:contains('delete')").click(function() { 
    $(this).closest("tr").remove(); 
}); 

Mise à jour (maintenant que le code dans la question a complètement changé)

Maintenant que vous avez modifié le code dans la question de contenir un seul bouton au lieu de deux, vous n'avez pas besoin à se soucier d'ajouter l'class, ou à l'aide du sélecteur :contains, vous pouvez simplement utiliser le sélecteur vieux button simple:

$("button").click(function() { 
    $(this).closest("tr").remove(); 
}); 

Answer 2

essayer. En tant que côté, vous ne devriez pas avoir le même id à un élément dom sur la page.

$("button").click(function() { 
    $(this).closest("tr").remove(); 
}); 

Dans votre balisage les balises ne sont pas fermées correctement. Par exemple, l'étiquette du bouton n'est pas fermée correctement, de sorte que le sélecteur ne fonctionne pas. Donnez un identifiant unique ou un nom de classe pour sélectionner les boutons requis.

Quelque chose comme ça

<tr> 
    <td>foo</td> 
    <td>Some content</td> 
    <td><input type="button" class="delete" value="Delete" /></td> 
    </tr> 

Utiliser delegate pour attacher gestionnaire d'événements uniquement à la table pour une meilleure performance. De cette façon, l'événement click sera attaché uniquement à l'élément de table, quel que soit le nombre de lignes qu'il contient.

$("table").delegate("input.delete", "click", function() { 
    $(this).closest("tr").remove(); 
}); 

Answer 3

Vous pouvez soemthing comme ceci:

<table> 
    <tr> 
    <td>row 1, cell 1</td> 
    <td><img class="delete" src="del.gif" /></td> 
    </tr> 
    <tr> 
    <td>row 2, cell 1</td> 
    <td><img class="delete" src="del.gif" /></td> 
    </tr> 
</table> 

Et votre jQuery:

$('table td img.delete').click(function(){ 
    $(this).parent().parent().remove(); 
}); 

Answer 4

Tout d'abord, il y a une erreur de syntaxe dans votre code HTML et vous devez un identificateur de classe pour un accès plus facile à ces boutons:

<table> 
    <tr> 
    <td>foo</td> 
    <td><button class="delete">delete</button></td> 
    </tr> 
    <tr> 
    <td>foo</td> 
    <td><button class="delete">delete</button></td> 
    </tr> 
</table> 

Ensuite, voici le code jQuery vous avez besoin:

$(function() { 
    $('button.delete').click(function(event) { 
     event.preventDefault(); 
     $(this).closest('tr').remove();  
    }); 
});