Estoy tratando de tener un botón que, cuando se haga clic, tenga un código jQuery vinculado. Vea el diseño general a continuación. Sin embargo, habrá un número variable de filas en la tabla. Todos los botones deben tener la misma acción pero aplicada a su elemento principal. ¿Cómo puedo conseguir esto?
Gracias
td { border: 1px solid black; padding: 10px; } <table> <tr> <td>Info</td> <td><button class="remove">Remove row</button></td> </tr> <tr> <td>Info</td> <td><button class="remove">Remove row</button></td> </tr> <tr> <td>Info</td> <td><button class="remove">Remove row</button></td> </tr> </table>Puede hacerlo de varias maneras, la pregunta está etiquetada con jQuery, por lo que la forma más fácil de usar jQuery es:
$("button").on("click", function(ev) { $(this).parents("tr").remove() }); Esto eliminará el elemento tr cuando haga clic en su botón, puede hacer lo que quiera dentro de esa función anónima
Prueba esto
let btns = $("button.remove"); // you will select only buttons with remove classen tu caso quieres algo como esto:
btns.each(function(){ let btn = $(this); btn.on('click',()=>{ // your stuff }) })¡espero que haya sido útil!
El siguiente ejemplo hace lo que necesita, verificará cualquier clic dentro de un elemento de la table para ver si coincide con el patrón requerido (en este caso, un button con la clase .remove ), antes de activar el código.
He agregado una fila agregada dinámicamente para que pueda probarla.
Si no tiene filas agregadas dinámicamente (es decir, todas están allí antes de que se ejecute este código), simplemente puede usar:
$("table button.remove").click( function() { $(this).closest("tr").remove(); }); // Add click event linked to the table // Will trigger whenever a button with class .remove is clicked within the table $( "table" ).on( "click", "button.remove", function() { // Move up DOM tree to nearest 'tr' and remove it $(this).closest("tr").remove(); }); // Add click event to add row button $("#add-row").click( function() { // Add dynamic row for testing $("table").append('<tr><td>Info</td><td><button class="remove">Remove row</button></td></tr>'); }); td { border: 1px solid black; padding: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Info</td> <td><button class="remove">Remove row</button></td> </tr> </table> <button id="add-row">Add Row</button>