Tengo los botones: Add , ahí quiero agregar s a mi (vienen de un número seleccionado) y Reset donde quiero quitar esos elementos. Sé que necesito clonar elementos DOM después de eliminarlos, pero ¿cómo lo implemento? Soy relativamente nuevo en JS. Alternativamente, puedo cambiar a una casilla de verificación con esta solución aquí: con casilla de verificación y clonación Cualquier ayuda apreciada - gracias.
<!DOCTYPE html> <html lang="en"> <head> <title>reprex jquery</title> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { // what´s the value of the integer input? var no = 10; let i = 1; $("#btn-add").click(function() { while (i <= no) { $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>"); $("#tbl input")[i-1].setAttribute("name", "s" + i); $("#tbl input")[i-1].setAttribute("value", i); $("#tbl textarea")[i-1].setAttribute("name", "c" + i); ++i; } }); }); $(document).ready(function() { $("#btn-remove").click(function() { $("#tbl tr:gt(0)").remove(); }); }); </script> </head> <body> <div> <button class="btn" id="btn-add" type="button">Add</button> <button class="btn" id="btn-remove" type="button">Reset</button> </div> <table id="tbl"> <thead> <tr> <th>col1</th> <th>col2</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>Puede volver a agregar sus filas al verificar el estado de i . Dado que se define de manera más global, a medida que continúa usándolo, el valor cambia. Considera lo siguiente.
$(function() { var no = 10; var i = 1; $("#btn-add").click(function() { if (i > 1) { i = 1; } while (i <= no) { $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>"); $("#tbl input")[i - 1].setAttribute("name", "s" + i); $("#tbl input")[i - 1].setAttribute("value", i); $("#tbl textarea")[i - 1].setAttribute("name", "c" + i); ++i; } }); $("#btn-remove").click(function() { $("#tbl tbody tr").remove(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <button class="btn" id="btn-add" type="button">Add</button> <button class="btn" id="btn-remove" type="button">Reset</button> </div> <table id="tbl"> <thead> <tr> <th>col1</th> <th>col2</th> </tr> </thead> <tbody> </tbody> </table> Aquí puedes ver que i se cambia en tu while . Es posible que deba restablecerlo cuando el usuario haga clic en el botón "Agregar".