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

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>

Solution

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>