Aquí estoy creando una matriz de datos enviados y guardándolos en tablas html. pero ahora también quiero eliminar una sola fila de datos de la misma matriz al hacer clic en el botón ¿Cómo puedo hacer esto?
Nota: quiero eliminarlo de la matriz y de la tabla
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 una combinación de array.pop() y element.remove() para eliminar el último elemento de la matriz y la tabla, si existe.
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>