Estoy intentando eliminar las dos columnas promedio de la tabla con javascript, he comprobado que el codigo que tengo me permite eliminar cualquier columna antes del primer colspan pero si intento eliminar una columna despues del primer colspan me dice que no existen mas columnas
let tabla: any = document.getElementById('tabla')
let row = tabla.rows;
for (let j = 0; j < row.length; j++) {
row[j].deleteCell(2);
}
tambien intente eliminar con el queryselector pero nada de resultados
document.querySelector('#tabla .eliminar').remove();
Tabla de Ejemplo:
<table class="border border-cyan-800" id='tabla>
<thead>
<tr>
<th rowspan="2">Nombre </th>
<th rowspan="2"> Apellido </th>
<th colspan="3"> Valores iniciales </th>
<th rowspan="2" class="eliminar"> Promedio inicial </th>
<th rowspan="2"> Media inicial </th>
<th colspan="3"> Valores finales </th>
<th rowspan="2" class="eliminar"> Promedio final </th>
<th rowspan="2"> Media final </th>
</tr>
<tr>
<th> Enero </th>
<th> Febrero </th>
<th> Marzo </th>
<th> Abril </th>
<th> Mayo </th>
<th> Junio </th>
</tr>
</thead>
<tbody>
<tr>
<td> juan </td>
<td> perez </td>
<td> 10 </td>
<td> 20 </td>
<td> 30 </td>
<td class="eliminar"> 30 </td>
<td> 18 </td>
<td> 5 </td>
<td> 8 </td>
<td> 50 </td>
<td class="eliminar"> 50 </td>
<td> 50 </td>
</tr>
</tbody>
</table>
querySelector
ygetElementById
no está encontrando a#tabla
nunca...