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? . — Silvan Bregy, Nov 26 '21 at 13:56
Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Nov 26 '21 at 13:59

score 1 · Answer 1 · answered Nov 26 '21 at 15:06

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. — Ailton, Nov 26 '21 at 17:39

How to delete all columns of a row using Javascript

1 Answers1