How to delete all columns of a row using Javascript

Question

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.

When deleting all columns of a row, aren't you just trying to delete a row ? Try to get the row element and delete it. And also, do you want to delete it OR to just hide it? . — user8018716
– user8018716, Commented Nov 26, 2021 at 13:56
Use event delegation instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an event argument’s target. See the tag info and What is DOM Event delegation?. — Sebastian Simon
– Sebastian Simon, Commented Nov 26, 2021 at 13:59

dale landry · Accepted Answer · 2021-11-26 15:06:58Z

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>

Thank you for your answer, but i need to delete the columns of all the rows instead of the row itself. I figured it out and it is working now.

Collectives™ on Stack Overflow

How to delete all columns of a row using Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related