Here I am creating array of submitted data and save it into html tables. but now I also want to delete single row of data from same array on button click how can i do this
Note : I want to delete it from array as well as from table
var users = []
$(document).ready(loadTable);
function loadTable() {
for(var i = 0; i < users.length; i++){
for(var j = 0; j < users[i].length; j++){
//console.log(users[i][j])
}
{continue;}
}
}
$("#submit").on('click', function() {
var temp = [document.getElementById("id").value,document.getElementById("name").value]
users.push(temp)
loadTable ($("tbody").append("<tr>" +
"<td>" + $("#id").val() + "</td>" +
"<td>" + $("#name").val() + "</td>" +
"</tr>"));
console.log(users)
});
table, th, td {
border: 1px solid black;
}<html>
<head>
<title>Hello</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<button type="button" id="submit">Add</button>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
</html>Use a combination of array.pop() and element.remove() to remove last element in the array and table if exists.
var users = []
$(document).ready(loadTable);
function loadTable() {
for(var i = 0; i < users.length; i++){
for(var j = 0; j < users[i].length; j++){
//console.log(users[i][j])
}
{continue;}
}
}
$("#submit").on('click', function() {
var temp = [document.getElementById("id").value,document.getElementById("name").value]
users.push(temp)
loadTable ($("tbody").append("<tr>" +
"<td>" + $("#id").val() + "</td>" +
"<td>" + $("#name").val() + "</td>" +
"</tr>"));
});
$("#delete").on('click',function(){
if(document.querySelectorAll('tbody > tr')){
document.querySelectorAll('tbody > tr')[document.querySelectorAll('tbody > tr').length -1].remove();
users.pop()
console.log(users)
}
})table, th, td {
border: 1px solid black;
}<html>
<head>
<title>Hello</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<button type="button" id="submit">Add</button>
<button type='button' id='delete'>Delete</button>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
</html>