jQuery Girl
  1. jQuery Girl
  3. Sélectionnez tr par identifiant avec Jquery
Intereting Posts
Passer $ (this) dans setTimeout Ciblez plusieurs sélecteurs dans JS uniquement PHP MySql: Arbre d’impression – Case à cocher parent-enfant Numéro de carte de crédit jQuery Validator + Type Match Formulaire ASP.Net MVC Ajax avec validation jQuery Vues partielles Javascript et MVC4 chargées avec AJAX positionnement du dialog jqueryui Jquery obtient les valeurs de lien de l’object de données Comment créer un wrapper JQuery sur un object svg existant? Javascript faisant tourner l’image pour toujours regarder le curseur de la souris? jquery.unobtrusive-ajax.min provoquant un comportement étrange sur la vue Comment obtenir le scrollTop d’un iframe Comment lier un événement jQuery à un contenu dynamic avec AngularJS Mettre à jour l’URL du navigateur sans recharger la page Vérifier si la page a été rechargée

Sélectionnez tr par identifiant avec Jquery

J’essaie de sélectionner un tr dans une table pour le supprimer, mais je n’ai aucune chance avec les sélecteurs.

Le tableau ressemble à ceci: 

  
 Product: Size: Colour: Qty Price Delete 
 
 Shuttle 54.95 Red 1  [X] 
 
 Shuttle 54.95 Red 1  [X]

Les tr avec les identifiants de produit sont ajoutés dynamicment avec jQuery, donc vous ne savez pas si cela fait une différence.

deleteProduct(id) ressemble à ceci: 

 function deleteProduct(id) { $('#product_' + id).remove(); }

Lorsque vous cliquez dessus, rien ne se passe et il n’y a pas d’erreur dans la console Chrome.

Un peu dans la console:

$('#selectedproducts').html(); Renvoie les données $('#selectedproducts').find('#product_1').html() renvoie vide

Je le ferais comme ça 

 
  
 Product: Size: Colour: Qty Price Delete 
 
 Shuttle 54.95 Red 1  [X] 
 
 Shuttle 54.95 Red 1  [X]

et le jQuery: 

 $('tr a').live('click', function () { $(this).closest('tr').remove(); });

une autre alternative à ce sélecteur serait 

  $('tr[id^="product_"] a').live('click', function () { // you could ge the id number from the tr to do other things with var id = $(this).closest('tr').attr('id').replace("product_",""); $(this).closest('tr').remove(); });

cela le limiterait à seulement celui dont l’identifiant commence par “product_”

alternativement, vous pouvez supprimer l’élément avec un _id se terminant comme ceci 

  $('tr[id^="product_"] a').live('click', function () { // you could ge the id number from the tr var id = $(this).closest('tr').attr('id').replace("product_",""); //then you could remove anything the that ends with _id $('[id$="_'+id+'"]').remove(); });

J’ai légèrement changé le code ici c’est une démo

Vous n’avez pas besoin d’avoir des onclics en ligne et vous n’avez pas besoin d’une fonction pour cela. Tout ce que vous avez à faire est d’appeler this qui fait référence à l’élément sur lequel vous cliquez. Dans l’exemple ci-dessous, tout élément sur lequel vous cliquez sera supprimé. 

 $('td').live('click', function() { $(this).parent().remove(); })

Consultez des exemples de travail sur http://jsfiddle.net/aswae/2/

Vous pouvez également insérer un bouton de suppression et choisir de le supprimer en cliquant sur le bouton.

Consultez l’exemple mis à jour sur http://jsfiddle.net/aswae/4/

Votre fonction deleteProduct prend un argument id , mais cet argument n’est défini nulle part dans le onclick . Essayez ceci à la place:

HTML

JavaScript 

 function deleteProduct(elt) { $(elt).closest('tr[id]').remove(); }

Démo 1

Comme indiqué dans les commentaires, votre

contient également un peu de balisage non valide.

Cela dit, vous utilisez jQuery, il n’ya donc aucune excuse pour ne pas écrire du code JavaScript discret . Débarrassez-vous entièrement des atsortingbuts onclick et utilisez plutôt ceci: 

 $('#selectedproducts a').live('click', function () { $(this).closest('tr[id]').remove(); });

Démo 2

Si vous voulez être plus précis avec les sélecteurs, cela fonctionnera avec le balisage actuel: 

 $('#selectedproducts td:last > a').live('click', function () { $(this).closest('tr[id]').remove(); });

Démo 3

Changez votre lien [X] en quelque chose comme: 

 [X]

Et votre jQuery à: 

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

Si vous utilisez littéralement deleteProduct(id) vous devrez remplacer ID par le numéro de cette ligne.

Vous pouvez également simplement sauter quelques niveaux dans l’arborescence DOM (supprimer le parent du parent) au lieu de saisir manuellement des ID. Je crois que vous pourriez mettre onclick="$(this).parent().parent().remove()" place.