I have the following code to delete the columns of a table:
let xvm = document.getElementsByClassName("removedor");
let k = 0
let y = document.querySelectorAll('td')
let ya = document.querySelectorAll('td').length
let z = document.querySelectorAll('th')
let za = document.querySelectorAll('th').length
let restaurador = document.getElementsByClassName('restaurador');
for (let k = 0; k < za; k++) {
let xvm = document.getElementsByClassName("removedor");
let y = document.querySelectorAll('td')
let ya = document.querySelectorAll('td').length
let z = document.querySelectorAll('th')
let za = document.querySelectorAll('th').length
let restaurador = document.getElementsByClassName('restaurador');
document.getElementsByClassName("removedor")[k].addEventListener("click", function() {
z[k].style.display = "none";
y[k].style.display = "none";
})
}
The code works with only the first row when i click to delete the columns. I want it to delete the column that i clicked from all the rows from the table.
You can add a class to each delete button, then run a forEach loop over that nodelist and check for a click. When the click hits use the event.target and head up the nodelist to the nearest parent element to add a verification => e.target.closest('td') this will give you the table data element your button is residing within. Then you can insert a verification to make sure the user wishes to delete or not, getting the id of the row =>
td.insertAdjacentHTML('beforeend', ` <label class="checkLabel">Delete ${row}? <input type="checkbox" class="checkYes"></label>`);
A second event listener to check if the class we add into the DOM for the check is present in the DOM => checkYes.addEventListener('change', deleteRow); if this is not present we add the HTML that will delete the row.
checkYes.addEventListener('change', deleteRow);
The function to deleteRow:
function deleteRow(e){
e.target.closest('tr').remove();
}
I did not add a toggle for the delete button, but you could also add a toggle to the delete button that will hide the secondary verification if you hit the delete button again.
const del = document.querySelectorAll('.del');
function deleteRow(e) {
e.target.closest('tr').remove();
}
function checkDel(e) {
let td = e.target.closest('td');
let row = e.target.closest('tr').id;
if (!td.querySelector('.checkYes')) {
td.insertAdjacentHTML('beforeend', ` <label class="checkLabel">Delete ${row}? <input type="checkbox" class="checkYes"></label>`);
}
let checkYes = td.querySelector('.checkYes');
checkYes.addEventListener('change', deleteRow);
}
del.forEach(btn => {
btn.addEventListener('click', checkDel);
})<table id="myTable">
<tr id="row_1">
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
<td>Row 1 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
<tr id="row_2">
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
<td>Row 2 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
<tr id="row_3">
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
<td>Row 3 Col 4</td>
<td><button class="del">Delete this row</button></td>
</tr>
</table>