<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Admin Page</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready (function () { $("#quetions").bind("click", function (event) { const id = event.target.dataset.index; $.ajax({ url: "questionedit/del", type: "GET", data: ({id: id}), success: function () { $(`[data-index~=${id}]`).parent().parent().remove() } }) }) }) </script> <link rel="stylesheet" href="{{ asset("Styles/AdminPageStyle.css") }}"> </head> <body> <ul id="menu"> <li id ="mainPage"><a href="{{ path('admin') }}">Main Page</a></li> <li id = "userPage"><a href="{{ path('admin/useredit') }}">User controller</a></li> <li id ="questionPage"><a href="{{ path('admin/questionedit') }}">Question controller</a></li> <li id ="quizPage"><a href="{{ path('admin/quizedit') }}">Quiz controller</a></li> </ul> </body> <div> <table class="questionTable"> <thead> <tr> <th class="RedWord">Question</th> <th>1st variant</th> <th>2st variant</th> <th>3st variant</th> <th>4st variant</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="QuestionName"></td> <td><input type="text" name="1stAnswer" ></td> <td><input type="text" name="2stAnswer" ></td> <td><input type="text" name="3stAnswer" ></td> <td><input type="text" name="4stAnswer"></td> <td><button type="submit">Add question</button></td> </tr> {% for question in questions %} </tbody> <tbody id="quetions"> <tr> <td>{{ question.name_of_question }}</td> {% for answer in answers %} {% if answer.Question_id.id==question.id %} <td>{{ answer.name_of_answer }}{{ answer.right }}</td> {%endif%} {% endfor %} <td><button data-index={{ question.id }} type="button">Delete</button></td> </tr> {% endfor %} </tbody> </table> </div> </html>

Here is a sample code. But the script is called only at the first click of the first button. How to solve this problem?

  • try bind on on change - Herrgott
  • one
    You bind an event on tbody, well, ok. But, there should not be non-unique id's on the page. The rest simply no one handles. Try changing the selector to a class, for example. - vp_arth

1 answer 1

Try to do through each

 $('#questions').each(function(){ $(this).bind("click", function(){...}) });
  • one
    $('#questions').length ? - Igor
  • one
    The selector on id always returns only one element - vp_arth