J'ai ce code produit html :

<div id="new-product-content">
   <div class="col-md-3 col-sm-6 col-xs-12">

    // here code product

     <div class="delete-product"> 
       <a>Detele</a>
     </div>

  </div>
</div>

<div id="products-div">

Code JQuery:

  $(document).ready(function() {
    var i = 0;    
  $('.add-new-product').on('click', function() {

    // here just clone the product when chick on (.add-new-product) button
    // every thing is fine with clone 

    var $clone = $('#new-product-content > div').clone();
    $clone.appendTo('#products-div');

      i++;  
      // here I try to put id in each product
      $('#new-product-content > div').attr('id', 'row'+ i);

      // here to put id in 
      $('.delete-product > a').attr('id',i);

    });

  });  

Ici, dans le code jQuery, je clone le produit plusieurs fois, puis je mets l'identifiant de chaque produit et mets le même identifiant pour le bouton de suppression qu'il peut le supprimer s'il le souhaite.

Alors de quoi ai-je besoin pour supprimer le produit après l'avoir ajouté ?

0
user12508960 27 janv. 2020 à 18:10

1 réponse

Meilleure réponse

Vous n'avez besoin d'aucun identifiant si vous utilisez une classe comme .product pour définir un produit.
Ensuite, utilisez la méthode .on() de jQuery avec délégation d'événement dynamique pour supprimer l'élément en passant du Event.target cliqué au .product en utilisant .closest() :

jQuery($ => { // DOM ready and $ alias in scope

  let i = 0;

  const template_product = (html="") => `<div class="product col-md-3 col-sm-6 col-xs-12">
    <div>${html}</div>
    <button type="button" class="delete-product">Delete</button>
  </div>`;

  const addProduct = () => $('#products').append(template_product(`Product: ${++i}`)); 
  const deleteProduct = (ev) => $(ev.target).closest('.product').remove();


  $('.add-product').on('click', addProduct);
  $('#products').on('click', '.delete-product', deleteProduct);

});
<button type="button" class="add-product">ADD PRODUCT</button>
<div id="products"></div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Sans délégation d'événement :

Une autre façon que j'utilise souvent est de déclarer cette action de bouton "Supprimer" dès le départ :

jQuery($ => { // DOM ready and $ alias in scope

  const newProduct = (html='') => $('<div/>', {
    class: 'product col-md-3 col-sm-6 col-xs-12',
    html: `<div>${html}</div>`,
    appendTo: '#products',
    append: $('<button/>', {
      class: 'delete-product',
      type: 'button',
      text: 'Delete',
      click() {
        $(this).closest('.product').remove();
      }
    })
  });


  let i = 0;
  $('.add-product').on('click', () => newProduct(`Product: ${++i}`));

});
<button type="button" class="add-product">ADD PRODUCT</button>
<div id="products"></div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Même s'il respecte les principes de modélisation et de composant encapsulé - ce qui précède peut sembler un peu compliqué pour un nouveau développeur.

0
Roko C. Buljan 27 janv. 2020 à 16:10