How to make certain table cell/cells in table disappear upon click?

Question

I'm trying to make a javascript function for a table.

I'm trying to make it so that when an element (or a table cell in this case) gets clicked other elements in the same table row disappear and the element clicked moves to the most left. There will be a slider opening up on the right showing the info about the element and such. However, I can't think of a way to do an onclick function with the elements to do the function where the elements disappear and the clicked element moves to the most left. I don't know a lot about javascript and I don't know whether there's a function that can straight up make table cells display:none or like a function that just makes the table cell colspan over other cells.

My html table:

<table id='TrendGames'>
    <tr>
        <td>
        <img class='GameCover' src='.png'>
        </td>
        <td>
        <img class='GameCover' src='.png'>
        </td>
        <td>
        <img class='GameCover' src='.png'>
        </td>
        <td>
        <img class='GameCover' src='.png'>
        </td>
    </tr>
</table>

Answer 1

Here is a script where the clicked cell will expand to take the space of the cells on the row.

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    var clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  var row = clickedCell.parentElement;
  var cells = row.children;

  // Hide other cells and rearrange the clicked cell
  for (var i = 0; i < cells.length; i++) {
    if (cells[i] !== clickedCell) {
      cells[i].style.display = 'none';
    }
  }
  row.insertBefore(clickedCell, row.firstChild); // Move to the leftmost
  clickedCell.colSpan = cells.length
  // Open the slider and display information
  openSlider(clickedCell);
}

function openSlider(cell) {
  // Implement the slider logic here
  console.log(cell.id)
}

#TrendGames td {
    border: 1px solid black; 
    padding: 5px; 
}

<table id='TrendGames'>
  <tbody>
    <tr>
      <td id="cell1"> Cell 1
        <img class='GameCover' src='.png' alt="cell1" />
      </td>
      <td id="cell2">Cell 2
        <img class='GameCover' src='.png' alt="cell2" />
      </td>
      <td id="cell31">Cell 3
        <img class='GameCover' src='.png' alt="cell3" />
      </td>
      <td id="cell4">Cell 4
        <img class='GameCover' src='.png' alt="cell4" />
      </td>
    </tr>
    <tr>
      <td id="cell1"> Cell 1
        <img class='GameCover' src='.png' alt="cell1" />
      </td>
      <td id="cell2">Cell 2
        <img class='GameCover' src='.png' alt="cell2" />
      </td>
      <td id="cell31">Cell 3
        <img class='GameCover' src='.png' alt="cell3" />
      </td>
      <td id="cell4">Cell 4
        <img class='GameCover' src='.png' alt="cell4" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

You could use removeChild() on the clicked cell and move it to the rightmost place with appendChild(). For that purpose install an event handler the table (thanks mplungjan for the hint about delegation):

let tbl = document.querySelector("table");
tbl.addEventListener("click", function(event) {
    if(event.target.tagName == "TD") {
        let td = event.target, tr = event.target.parentElement;
        tr.removeChild(td);
        tr.appendChild(td);
    };
});