2010-08-23 6 views
7

Espérons que quelqu'un peut vous conseiller. Avoir des problèmes en essayant de supprimer une ligne une fois qu'un lien a été cliqué.jQuery TR plus proche sélection

HTML

<table> 
    <tr><td>Some Data</td><td><a href="#" class="remove-row>Remove Row</a></td></tr> 
    <tr><td>Some Data</td><td><a href="#" class="remove-row">Remove Row</a></td></tr> 
</table> 

Maintenant, la JS

$("a.remove-row").live('click', function(eve){ 
    eve.preventDefault(); 
    $.ajax({ 
    type: 'GET', 
    url: '/someaction/', 
    dataType: 'json', 
    success: function(msg){ 
    if(msg.error){ 
    alert(msg.error); 
    }else{ 
    $(this).closest('tr').remove(); 
    alert(msg.success); 
    }  
    } 
    }) 
}); 

Cela devrait être simple, réel BUTS son ne pas enlever la ligne. Juste pour coups de pied si je le change à quelque chose comme

$('.remove-row').addClass('foo'); 

Il va ajouter toto à toutes les lignes de la table. Donc, peut comprendre pourquoi il ne supprime pas la ligne la plus proche.

Des idées?

Merci à l'avance.

Répondre

18

Le problème est this fait actuellement l'objet ajax dans votre rappel success, mais il est une solution facile, utilisez l'option content comme ceci:

$("a.remove-row").live('click', function(eve){ 
    eve.preventDefault(); 
    $.ajax({ 
    context: this,     //add this here! 
    type: 'GET', 
    url: '/someaction/', 
    dataType: 'json', 
    success: function(msg){ 
    if(msg.error){ 
    alert(msg.error); 
    }else{ 
    $(this).closest('tr').remove(); 
    alert(msg.success); 
    }  
    } 
    }) 
}); 

L'option context dicte ce que this sera dans le $.ajax() fonctions de rappel, puisque vous voulez que ce soit le .remove-row sur lequel vous avez cliqué, utilisez this comme option.

+0

Nick - Correction mineure. Dans le 'rappel:' callback, 'this' fait référence à l'objet' xhr', pas 'window'. http://jsfiddle.net/WzeAh/ * Ceci, bien sûr, n'a aucune pertinence par rapport à votre solution proposée. * +1 – user113716

+0

@patrick - Désolé, je vais clarifier un peu plus dans la réponse, il * se comporte * comme «fenêtre» pour l'utilisation actuelle, par exemple '$ (this) .find (selector)' fonctionne de la même façon que si '(this)' était '$ (window)' ou '$ (document)'. –

+0

Nick - A moins que j'aie mal compris votre clarification, il ne semble pas (dans le rappel) que $ (this) vous donne le même comportement que $ (document) ', puisque faire un' .find() 'renvoie "0" correspond. http://jsfiddle.net/WzeAh/1/ EDIT: '$ (window)' donne aussi un résultat '0'. – user113716

0

Vous avez l'attribut non fermé class="remove-row à la première ligne.

See here

2

réponse de Nick devrait fonctionner, mais vous pouvez aussi le faire, je ne sais pas quel est le meilleur, probablement son Nick, mais il peut aider quand même ...

$("a.remove-row").live('click', function(eve){ 
    var row = this; 
    eve.preventDefault(); 
    $.ajax({ 
    type: 'GET', 
    url: '/someaction/', 
    dataType: 'json', 
    success: function(msg){ 
    if(msg.error){ 
    alert(msg.error); 
    }else{ 
    $(row).closest('tr').remove(); 
    alert(msg.success); 
    }  
    } 
    }) 
}); 
0

Ne serait-il pas plus facile de faire la suppression/cacher avant la main?

comme ceci:

$("a.remove-row").live('click', function(eve){ 
     $(this).hide(); 
     <The rest of your code logic> 
     ......