The table below initially creates 5 rows, now I want to delete all rows where the checkbox is selected. To do so I insert a checkbox in cell[0]. The delete button iterates through all rows and should delete all rows with a checked checkbox.
It does work, if only one checkbox is selected but seems buggy if multiply rows are checked. I assume the issue appears because the index changes as soon as the first checked row was deleted. Nethertheless how could I achieve a similar behavour without the need to create single delete buttons for each row?
<!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>I would not iterate over the rows, instead use a querySelectorAll for all checked checkboxes and remove the parent tr element. Like this:
document.getElementById("deleteRow").addEventListener("click", function() {
const checkboxes = document.querySelectorAll('input:checked');
checkboxes.forEach(checkbox => checkbox.parentElement.parentElement.remove());
})
Here's the full example:
<!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>how about just the button?
<button onclick="document.querySelectorAll('#table input:checked').forEach( el => el.parentNode.parentNode.remove() )" >
Delete rows
</button>
When 0th and 1st row should be removed, the indices changes after table.deleteRow(i).
Consider deleting them at once or backward.
<!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>