I have to buttons: Add, there I want to add s to my (they come from a selected number) and Reset where want to remove those elements. I know I need to clone DOM elements after removing them, but how do I implement it. I´m relatively new to JS. Alternatively I can switch to a checkbox with this solution here: with checkbox and cloning Any help appreciated - thks.
<!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>
You can add back your rows by checking the status of
i. Since it's defined more globally, as you continue to use it, the value changes. Consider the following.Here you can see that
iis changed in yourwhile. You may need to reset it when the User clicks on "Add" button.