title: javascript table column remove when click table
body: <p>It can be awkward because English is not my first language.</p>
  <p>I have a task to write <strong>pure javascript</strong> code that deletes the clicked column when the table is clicked. <strong>Unfortunately I can't use jquery.</strong></p>
  <p><code>let cells = document.querySelectorAll(&quot;table td&quot;);</code>
  is the code I basically need to use.</p>
  <pre><code>window.onload = function () {
        function click(e) {
          let cells = document.querySelectorAll(&quot;table td&quot;);
          let index = e.target.cellIndex;
          cells.forEach((td, i) =&gt; {
            if (td.cellIndex === index) {
              td.parentElement.querySelectorAll(&quot;td&quot;)[index].remove();
            }
          })
        }
        
        // set onclick event for the head of each column
        document.querySelectorAll('tr &gt; td').forEach(td =&gt; td.onclick = click)
      }
  </code></pre>
  <p>In my source, I delete all the columns to the right of where I clicked to see where the problem is.</p>
  <p>Only the column of the clicked td should be deleted.</p>
  <p>I don't know where the problem is or how to fix it.</p>