Comment identifier un élément spécifique dans et append un bouton de suppression à chaque ligne de jquery

1.) J’ai créé une table nestede. Ce que je veux faire, c’est que lorsque je clique sur le bouton “Supprimer” de la table enfant, sa ligne sera supprimée.

2.) J’ai l’étiquette . Le problème est comment puis-je mettre une validation qui vérifie si le type d’élément a déjà été sélectionné par un client, mais cet élément sélectionné peut également être sélectionné au prochain client.

Par exemple, Client1 sélectionne Iron . Désormais, le Client1 ne peut pas choisir le type d’élément de Iron sur l’article suivant. Client1 peut également sélectionner Copper ou Wood mais pas le Iron . Ensuite, si j’ai Customer2, le type d’article Iron peut être sélectionné.

Voici mon code:

  $(".addItem").on('click', function(e) { $(this).closest('table').find(".item:last").after('New itemIronCopperWood'); }); $(".addCustomer").on('click', function(e) { var newCustomer = $('.customer:last').after('New Customer'); var newCart = $('.cart:first').clone(true, true).wrap('td'); newCart.find('tbody').html("").html('New itemIronCopperWood'); $('.customer:last').append(newCart); e.preventDefault(); }); $('.itemType').on('change', function() { var selected = $(this)find('option:selected').val(); if ($(this).find('option:selected').val() === selected) { alert("Item already selected."); } });

  table, td, th { border: 1px solid black; }

   PO   
 
     Name  Age  Address  Gender  Cart  
 
   Some Name  30  My Address  Male      Delete  Brand  Quantity  Size  Color  Type  
 
    Yamaha  30  Large  Black    Iron Copper Wood

J’ai résolu le problème de Delete . En termes de validation, répondez à la question ci-dessous et je corrigerai la même chose.

D’accord, je l’ai traité correctement maintenant avec un élément vide et en désactivant la valeur sélectionnée sur un autre élément.

 $(".addItem").on('click', function(e) { var parent = $(this).closest('table'); var lastItem = parent.find(".item:last"); var newItem = $('New item'); if(lastItem && lastItem.length > 0) { parent.find(".item:last").after(newItem); } else { parent.append(newItem); } fixNewSelectOption(newItem); handleDeleteAction(); }); $(".addCustomer").on('click', function(e) { var newCustomer = $('.customer:last').after('New Customer'); var newCart = $('.cart:first').clone(true, true).wrap('td'); newCart.find('tbody').html("").html('New item'); $('.customer:last').append(newCart); handleDeleteAction(); e.preventDefault(); }); $(document).on('click', '.item button', function(){ if($(this).closest('table').find('.item button').length > 1) { $(this).closest('tr').remove(); } handleDeleteAction(); }); $(document).on('change', '.itemType', function(){ fixSelectOption($(this)); }); function handleDeleteAction() { $('table.cart').each(function(){ var cart = $(this); var deleteButtons = cart.find('.item button'); deleteButtons.prop('disabled', deleteButtons.length <= 1); }); } function fixSelectOption(elm) { var selected = elm.val(); var options = elm.find('option[value!="' + selected + '"]'); var elms = elm.closest('table').find('.itemType').not(elm); elms.each(function(){ var current = $(this); if(current.val() === selected){ current.val('-1'); } options.each(function(){ var optValue = $(this).val(); if(optValue !== '-1' && !$(this).prop('disabled')){ current.find('option[value="' + optValue + '"]').prop('disabled', false); } }); if(selected !== '-1'){ current.find('option[value="' + selected + '"]').prop('disabled', true); } }); } function fixNewSelectOption(elm) { var elms = elm.closest('table').find('.itemType').not(elm); elms.each(function(){ var current = $(this); if(current.val() !== '-1'){ elm.find('option[value="' + current.val() + '"]').prop('disabled', true); } }); }

 table, td, th { border: 1px solid black; }

   PO   
 
     Name  Age  Address  Gender  Cart  
 
   Some Name  30  My Address  Male      Delete  Brand  Quantity  Size  Color  Type  
 
    Yamaha  30  Large  Black

Pour supprimer cette ligne respective en cliquant sur un bouton “Supprimer”, pouvez-vous utiliser cette

  $(document).on('click', '.item button', function(){ $(this).parent().parent().remove(); });

Voici un codepen

Une autre chose que j’ai remarquée: qu’essayez-vous de faire dans votre $('.itemType').on('change', function() ? Parce que pour l’instant, tout ce que vous faites est de vérifier littéralement la valeur de l’option sélectionnée pour elle-même. ce qui sera toujours évidemment vrai.

vous devez passer un identifiant d’élément qui sera supprimé du panier du client et de la ligne sélectionnée comme ceci;

 New item

jquery partie:

  $("tr.item button").click(function(){ var item_to_remove = $(this).attr("data-id"); var row = $(this).parent().parent(); $.ajax({ url: "url to cart handler for delete item", data: "id="+item_to_remove, type: "post", success: function(data){ row.remove(); }, error: function(){ console.log("ajax req for delete failed"); } }); });

Pour la suppression de lignes, j’ai ajouté des checboxes. PLUNKER

FRAGMENT

 table { table-layout: fixed; } table, td, th { border: 1px solid black; } .name, .brand, .color { width: 10%; } .age, .address, .pay, .qty, .size { width: 5%; } .cart th:first-of-type { width: 2.5%; }

      PO     
     Name  Age  Address  Pay  Cart  
 
   Jon Doe  30  Earth  Credit         Brand  Qty  Size  Color  
 
      New Item

Je sais que vous avez obtenu une réponse à votre question, mais je ne pouvais pas remarquer de mauvaises tendances dans votre code. Vous avez probablement entendu parler d’une phrase sur les meilleures pratiques et sur la nécessité de faire les choses correctement. Par cela, je veux faire une suggestion. Évitez d’utiliser HTML dans le code Javascript chaque fois que cela est possible car cela rendrait l’application moins bien structurée.

Par cela, je veux vous présenter des modèles .

Exemple, comment pouvons-nous optimiser votre code (à partir d’une réponse acceptée):
Enveloppez tout forme newItem variable dans balise de script et mettez quelque part dans votre corps:

Le navigateur l’ignorera simplement jusqu’à ce que vous html() méthode html() pour renvoyer ce contenu.

Donc au lieu de cela:

  var newItem = $('New item');

Dans votre fichier javascript, vous aurez seulement ceci:

  var newItem = $('#newItem-template').html();

Voici le code de travail optimisé: jsFiddle

C’est une façon jQuery de gérer avec des modèles, mais il existe des moteurs de modèles puissants si votre projet grossit:
Moteurs de templates JavaScript