Как удалить товар кнопкой удаления?

Question

У меня есть 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">

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);

    });

  });  

Здесь в jQuery коде я клонирую продукт много раз, затем поставить идентификатор для каждого продукта и поставить тот же идентификатор для кнопки удаления, что он может удалить его, если он будет sh.

Так что мне нужно удалить продукт после того, как он добавит его

Answer 1

Вам не нужен идентификатор, если вы используете класс, такой как .product, для определения продукта .
, чем использование jQuery '.on() метода с динамическим событием c Делегирование для удаления элемента путем перехода от Event.target к .product с помощью .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>

Без делегирования события:

Другой часто используемый способ - объявить действие кнопки «Удалить» заранее:

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>

, даже если он соблюдает принципы шаблонного и инкапсулированного компонента - приведенное выше может показаться немного сложным для разработчика fre sh.