Uma vez que o usuário clique no botão de remover as linhas selecionadas, precisam ser realizadas algumas etapas.
Primeiro, queremos obter o elemento que o usuário selecionou. Para isso, fazemos algo como:
const input = document.querySelector('#myTable [name="radioButton"]:checked');
Isso retornará, dentro dos limites selecionáveis de #myTable
, o campo cujo name
seja igual a radioButton
e que foi marcado pelo usuário.
Tendo selecionado o elemento, precisamos determinar o rowspan
relacionado a ele. Em posse do rowspan
numérico de valor N, basta selecionar as N - 1 linhas após a atual (incluindo a atual).
Em seguida basta remover todos os elementos selecionados.
Juntando tudo, teremos algo como:
function removeRows() {
const input = document.querySelector('#myTable [name="radioButton"]:checked');
// Garante que o código abaixo não seja executado caso nenhum elemento seja selecionado:
if (!input) return;
const td = input.parentElement;
const { rowSpan } = td; // A célula possui atributo numérico `rowSpan`.
// Ascendemos mais uma vez na árvore para obter a linha atual:
const tr = td.parentElement;
// Obtemos a lista das linhas a serem removidas:
const rowsToRemove = getNextNElements(tr, rowSpan - 1);
for (const row of rowsToRemove) {
row.remove();
}
}
Note que a função getNextNElements
não é nativa dos navegadores. Portanto, precisamos implementá-la de algum modo. Uma possibilidade seria algo como:
/**
* Seleciona o elemento e os próximos N.
*
* @param {HTMLElement} current
* @param {number} n
* @return {Array<HTMLElement>}
*/
function getNextNElements(current, n) {
const list = [current];
while (n-- > 0) {
const last = list[list.length - 1];
list.push(last?.nextElementSibling ?? null);
}
return list;
}
Ela basicamente pega um filho N de determinado elemento e cria uma lista com o elemento atual e os próximos n
(passado via 2º argumento). A vantagem de utilizar esse tipo de função é que não é necessário varrer toda a lista de elementos (que pode ser extensa) para determinar o índice do primeiro elemento a ser removido.
O encadeamento opcional ?.
e operador de coalescência nula foram utilizados caso n
seja maior que o número de elementos restantes. Assim evitam-se erros relacionados à tentativa de acesso a alguma propriedade de null
. Saiba mais aqui.
Teremos, enfim, algo assim:
function addLines() {
tabBody = document.getElementById('myTable');
qtdRowsInput = document.getElementById('qtdRows').value;
var valueRadioButton = 1;
for (var i = 0; i < qtdRowsInput; i++) {
row = document.createElement('tr');
if (i == 0) {
var tdElement0 = document.createElement('td');
tdElement0.rowSpan = qtdRowsInput;
}
var tdElement1 = document.createElement('td');
var tdElement2 = document.createElement('td');
var checkbox = document.createElement('input');
checkbox.type = 'radio';
checkbox.name = 'radioButton';
checkbox.value = valueRadioButton;
checkbox.id = 'rdb' + valueRadioButton;
textnode1 = document.createTextNode(qtdRowsInput);
textnode2 = document.createTextNode('A');
if (i == 0) {
tdElement0.appendChild(checkbox);
}
tdElement1.appendChild(textnode1);
tdElement2.appendChild(textnode2);
if (i == 0) {
row.appendChild(tdElement0);
}
row.appendChild(tdElement1);
row.appendChild(tdElement2);
tabBody.appendChild(row);
}
valueRadioButton++;
}
function removeRows() {
const input = document.querySelector('#myTable [name="radioButton"]:checked');
// Garante que o código abaixo não seja executado caso nenhum elemento seja selecionado:
if (!input) return;
const td = input.parentElement;
const { rowSpan } = td; // A célula possui atributo numérico `rowSpan`.
// Ascendemos mais uma vez na árvore para obter a linha atual:
const tr = td.parentElement;
// Obtemos a lista das linhas a serem removidas:
const rowsToRemove = getNextNElements(tr, rowSpan - 1);
for (const row of rowsToRemove) {
row.remove();
}
}
/**
* Seleciona o elemento e os próximos N.
*
* @param {HTMLElement} current
* @param {number} n
* @return {Array<HTMLElement>}
*/
function getNextNElements(current, n) {
const list = [current];
while (n-- > 0) {
const last = list[list.length - 1];
list.push(last?.nextElementSibling ?? null);
}
return list;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Rows: <input type="number" id="qtdRows" min="1"/> <button onclick="addLines();">Add rows</button> <button onclick="removeRows();">Remove rows</button> <br> <br>
<table id="myTable">
<tr>
<th> X </th>
<th> Numbers</th>
<th> Letters</th>
</tr>
</table>
Escondido para não ocupar muito espaço desnecessariamente.