Я хочу показать сообщение для подтверждения удаления

Question

Прежде всего, даже если я хочу отобразить сообщение после нажатия на таблицу, ничего не произошло.Я не понял, чего не хватает для этого первого шага.В конце я хочу подтвердить удаление после нажатия на кнопку удалить.Вот мой код для каждого файла html.twig и js

main.js:

   var produits = document.getElementById('produits');

   if (produits) {
         produits.addEventListener('click', e => {
          // if (e.target.className === 'btn btn-danger') {
          //     if (confirm('Are you sure?')) {
          //         const id = e.target.getAttribute('data-id');
          //
          //         fetch(`/Delete/${id}`, {
          //
          //   }).then(res => window.location.reload());
          //}
          // }
    alert(2);
         });
    }

Affiche.html.twig:

    <table class="table table-striped table-bordered" id="produits">

                        <tr>

                            <th>Nom</th>
                            <th>Desctiption</th>
                            <th>Image</th>
                            <th>Operation</th>
                            <th>Actions</th>

                        </tr>


                        {%  for produit in produits %}

                            <tr>

                                <td>{{ produit.nomProduit }}</td>

                                <td>{{ produit.descriptionProduit }}</td>

                                <td><img alt="" src="{{ asset('uploads/images/'~produit.imageProduit) }}"></td>

                                <td>{{ produit.operationProduit }}</td>
                                <td>
                                    <a href="" class="btn btn-info" id="button">Show</a>
                                    <a href="" class="btn btn-success">Edit</a>
                                    <a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}">Delete</a>
                                </td>


                            </tr>

                        {% endfor %}



                    </table>

Answer 1

создать функцию:

    <script>
      function getvalue() {
        alert("Hi");
        return;
      }
    </script>

Свяжите ее с кнопкой с помощью 'onClick':

<a href="Supprimer/{{ produit.idProduit }}" class="btn btn-danger" data-id="{{ produit.idProduit }}" onClick="getvalue()">Delete</a>

Answer 2

1. Идентификатор по определению уникален, здесь кажется, что вы можете иметь более одного продукта, поэтому вы должны установить класс для всех них.Кроме того, вы устанавливаете «data-id», а не id.В моем примере я использовал «produits-alertste».

2. Выберите продукты по классам и зациклите их, чтобы добавить событие onClick, чтобы вы могли одновременно вызывать диалог и получать конкретный идентификаторпродукт кликнул.

Так что это приводит к:

for (var i = 0, len = produits_alerte.length; i < len; i++) {  
    produits_alerte[i].onclick = function() {
        if (confirm("Are you sure?")) {

            console.log('Product ID Clicked : ' + this.getAttribute("data-id"));

            //delete product with id above

        } else {

            //or don't

        }
    } 
}

Вот рабочее решение с использованием только ванильного JavaScript.