At each subsequent function call, the variable is triggered several times.

Task setting . The table must be equipped with the ability to delete certain lines from it. Click on the word delete in the line -> a modal menu opens, where the user is asked again what exactly to delete or to cancel. Clicking on the button of the modal window "Delete" from the table should disappear the corresponding row.

Markup

There is a markup c table. Two columns, the first with an identifier, and the second with some text. The first line is the header, and the left ones are normal lines:

<table id="table_main"> <tr> <th>id</th> <th>Текст задачи</th> <th>Действия</th> </tr> <tr> <td>1</td> <td>Текст 1</td> <td><p class="delete">Удалить</p></td> </tr> <tr> <td>2</td> <td>Текст 2</td> <td><p class="delete">Удалить</p></td> </tr> <tr> <td>3</td> <td>Текст 3</td> <td><p class="delete">Удалить</p></td> </tr> <tr> <td>4</td> <td>Текст 4</td> <td><p class="delete">Удалить</p></td> </tr> <tr> <td>5</td> <td>Текст 5</td> <td><p class="delete">Удалить</p></td> </tr> <tr> <td>6</td> <td>Текст 6</td> <td><p class="delete">Удалить</p></td> </tr> </table> 

And the modal window:

  <div class="modal_delete"> <div id="modal_button_container"> <button id="button_delete">Удалить</button> <button id="button_cancel">Отмена</button> </div> </div> 

My script

 /*Скрипт удаления задачи*/ $(".delete").click(function () { // Определяем номер строки по нажатому p var num = $(this).parent().parent().index(); // Делаем модальное окно видимым $(".modal_delete").css("display", "flex"); // Кнопка удаления $("#button_delete").click(function () { // Скрываем модальное окно $(".modal_delete").hide(); // Удаляем строку $("#table_main").children().children().eq(num).remove(); // (1) }); }); 

What is the problem ?

The first time the function works fine. But with each subsequent call it deletes several lines already. Through the browser console revealed that the line of code (*) works several times: the first time it is called once, the second time - twice, the third time - three times, etc. You can see that the value of the variable num changes every time.

For example, if I click on "Delete" lines 1 - 3 - 5, then the second call to the num function will be 3 when the line (1) is triggered with num 3, then the value of num will change to the previous one - 1, and the line (1) will work again. In the third call, the values ​​of num will change in this order: 5 - 3 - 1 (that is, the reverse).

Why does num change its meaning? I see this behavior of variables for the first time.

Question : how to ensure the operation of the string (*) once? How to make the num value the only one?

PS Alternative solutions to the problem are also being taken.