Estoy trabajando en la creación de una tabla en la que puedo agregar y eliminar filas dinámicamente usando JQuery. Mi problema es que el único botón de eliminación que funciona bien es el primero (el que tiene la primera fila predeterminada) más adelante, cada vez que agrego nuevas filas, los botones de eliminación no eliminan la fila. Estas son partes de mi código. ¡Apreciaré su ayuda!
<script> $(document).ready(function(){ $("#add").click(function(){ var id="<input type='text' placeholder='Enter student id'>"; var name = "<input type='text' placeholder='Enter student name'>"; var timeSlot="<input type='text' placeholder='The time slot'>"; var row = "<tr> <td>"+id+"</td>" + "<td>"+name+"</td>" + "<td>"+timeSlot+"</td>"+ " <td> <button class='remove' type='submit'>Remove Row</button> </td> </tr>"; $("tbody").append(row); }); $("button.remove").click(function(){ $(this).parents("tr").remove(); }); }); </script> <table id="myTble"> <thead> <tr> <th>Student id</th> <th>Student name</th> <th>TimeSlot</th> <th> <button id="add" type="submit">Add Row</button> </th> </tr> </thead> <tbody> <tr> <td>00000000</td> <td>xxx xxxxx</td> <td>9:00-10:00</td> <td> <button class="remove" type="submit">Remove Row</button> </td> </tr> </tbody> </table>