La siguiente tabla crea inicialmente 5 filas, ahora quiero eliminar todas las filas donde está seleccionada la casilla de verificación. Para hacerlo, inserto una casilla de verificación en la celda [0]. El botón Eliminar recorre todas las filas y debe eliminar todas las filas con una casilla de verificación marcada.
Funciona, si solo se selecciona una casilla de verificación, pero parece tener errores si se marca la opción de multiplicar filas. Supongo que el problema aparece porque el índice cambia tan pronto como se eliminó la primera fila marcada. Sin embargo, ¿cómo podría lograr un comportamiento similar sin la necesidad de crear botones de eliminación únicos para cada fila?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> table, th, td { border: 1px solid black; } </style> <body> <div id="wrapper"> <button id="deleteRow">-</button> <table id="table"> <tbody> <!-- filled by script --> </tbody> </table> </div> <script> // add initial rows var table = document.getElementById("table") for (var i = 0; i < 5 ; i++) { var row = table.insertRow(i) var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); cell0.contentEditable = false; cell1.contentEditable = true; cell2.contentEditable = true; cell0.innerHTML = '<input type="checkbox">'; cell1.innerHTML = 'Property: ' + i; cell2.innerHTML = 'Value'; } // BUTTON: delete row document.getElementById("deleteRow").addEventListener("mouseup", function() { var table = document.getElementById("table"); var row = table.rows; for (var i = 0; i < row.length; i++) { if (row[i].cells[0].firstElementChild.checked) { table.deleteRow(i); } } }) </script> </body> </html>No iteraría sobre las filas, sino que usaría un querySelectorAll para todas las casillas de verificación marcadas y eliminaría el elemento tr principal. Como esto:
document.getElementById("deleteRow").addEventListener("click", function() { const checkboxes = document.querySelectorAll('input:checked'); checkboxes.forEach(checkbox => checkbox.parentElement.parentElement.remove()); })Aquí está el ejemplo completo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> table, th, td { border: 1px solid black; } </style> <body> <div id="wrapper"> <button id="deleteRow">-</button> <table id="table"> <tbody> <!-- filled by script --> </tbody> </table> </div> <script> // add initial rows var table = document.getElementById("table") for (var i = 0; i < 5; i++) { var row = table.insertRow(i) var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); cell0.contentEditable = false; cell1.contentEditable = true; cell2.contentEditable = true; cell0.innerHTML = '<input type="checkbox">'; cell1.innerHTML = 'Property: ' + i; cell2.innerHTML = 'Value'; } // BUTTON: delete row document.getElementById("deleteRow").addEventListener("click", function() { const checkboxes = document.querySelectorAll('input:checked'); checkboxes.forEach(checkbox => checkbox.parentElement.parentElement.remove()); }) </script> </body> </html>¿Qué tal solo el botón?
<button onclick="document.querySelectorAll('#table input:checked').forEach( el => el.parentNode.parentNode.remove() )" > Delete rows </button>Cuando se deben eliminar las filas 0 y 1, los índices cambian después de table.deleteRow(i) .
Considere eliminarlos de una vez o al revés.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> table, th, td { border: 1px solid black; } </style> <body> <div id="wrapper"> <button id="deleteRow">-</button> <table id="table"> <tbody> <!-- filled by script --> </tbody> </table> </div> <script> // add initial rows var table = document.getElementById("table") for (var i = 0; i < 5 ; i++) { var row = table.insertRow(i) var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); cell0.contentEditable = false; cell1.contentEditable = true; cell2.contentEditable = true; cell0.innerHTML = '<input type="checkbox">'; cell1.innerHTML = 'Property: ' + i; cell2.innerHTML = 'Value'; } // BUTTON: delete row document.getElementById("deleteRow").addEventListener("mouseup", function() { var table = document.getElementById("table"); var row = table.rows; for (var i = row.length-1; i >= 0; i--) { if (row[i].cells[0].firstElementChild.checked) { table.deleteRow(i); } } }) </script> </body> </html>