javascript table column remove when click table

Question

It can be awkward because English is not my first language.

I have a task to write pure javascript code that deletes the clicked column when the table is clicked. Unfortunately I can't use jquery.

let cells = document.querySelectorAll("table td"); is the code I basically need to use.

window.onload = function () {
      function click(e) {
        let cells = document.querySelectorAll("table td");
        let index = e.target.cellIndex;
        cells.forEach((td, i) => {
          if (td.cellIndex === index) {
            td.parentElement.querySelectorAll("td")[index].remove();
          }
        })
      }
      
      // set onclick event for the head of each column
      document.querySelectorAll('tr > td').forEach(td => td.onclick = click)
    }

In my source, I delete all the columns to the right of where I clicked to see where the problem is.

Only the column of the clicked td should be deleted.

I don't know where the problem is or how to fix it.

We need to have an idea of the shape of your table to help, somethimes the cellIndex isn't what you expect in more complex tables — kigiri
– kigiri, Commented Dec 12, 2021 at 12:43
It's actually a good thing that you can't use JQuery. Still seeing it in way too much projects. — Getter Jetter
– Getter Jetter, Commented Dec 12, 2021 at 12:51

kigiri · Accepted Answer · 2021-12-12 12:45:27Z

4

You can select the cells you want to remove via the nth-child selector, based on cellIndex. The below table demonstrates this:

function click(e) {
  let index = e.target.cellIndex;
  document.querySelectorAll(`tr td:nth-child(${index + 1})`).forEach(cell => cell.remove());
}

// set onclick event for the head of each column
document.querySelectorAll('tr > td').forEach(td => td.onclick = click)

<table border="1">
  <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
  <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
  <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
  <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
  <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>
</table>

edited Dec 12, 2021 at 12:45

kigiri

3,45824 silver badges26 bronze badges

answered Dec 12, 2021 at 12:38

Wais Kamal

6,2503 gold badges21 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maik Lowrey Over a year ago

good and short answear! nice

Maik Lowrey · Accepted Answer · 2021-12-12 13:12:12Z

Collect all tr. Apply click eventListener to every single tr. The EventHandler collect all td's by column index. Then use remove() function.

document.querySelectorAll('tr').forEach((c) => {
  c.addEventListener('click', (e) => {
    document.querySelectorAll('tr td:nth-child(' + (e.target.cellIndex + 1) + ')')
     .forEach((td) => {
      td.remove();
    });
  })  
});

table {
  border: 1px solid #000;
}

<table>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
  <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr>
</table>

Collectives™ on Stack Overflow

javascript table column remove when click table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related