Delete Row da Tabella

Buongiorno

dunque, ho una tabella e mi occorre poter eliminare le righe selezionate tramite checkbox utilizzando solo Javascript nativo (no jQuery).

La tabella è semplicissima (in produzione sarà generata dinamicamente)

Codice HTML:

---

<table id="elenco" name="elenco">
  <thead>
    <tr>
      <th><input type="checkbox" disabled /></th>
      <th>Nome</th>
    </tr>
  </thead>
 
  <tbody>
    <tr id="u_1">
      <td><input type="checkbox" name="sel" value="1" /></td>
      <td>A</td>
    </tr>
    <tr id="u_2">
      <td><input type="checkbox" name="sel" value="2" /></td>
      <td>B</td>
    </tr>
    <tr id="u_3">
      <td><input type="checkbox" name="sel" value="3" /></td>
      <td>C</td>
    </tr>
    <tr id="u_4">
      <td><input type="checkbox" name="sel" value="4" /></td>
      <td>D</td>
    </tr>
  </tbody>
</table>

---

provo a cancellare delle righe ma:
- se cancella una sola riga, tutto OK
- se cancello due righe NON contigue tutto OK (tipo A e C, B e D)
- se cancello due o + righe la seconda selezionata non viene eliminata e rimane selezionata
(se provo a cancellare A e B, A viene eliminata mentre B rimane (selezionata) così come con B e C, C rimane, ecc. ma anche se provo con A, B e C, A e C vengono eliminate mentre B rimane)
Anche se seleziono tutte e 4 le righe, A e C eliminate, B e D rimaste.

Il codice JS è

Codice:

---

var els = document.getElementsByTagName('input');
                               
for( i = 0; i < els.length; i++){
  if( els[i].getAttribute('type') == 'checkbox' && els[i].checked ) {
    var k = els[i].value;
                       
    document.getElementById('u_' + k).remove();
  }
}

---

Perchè questo strano comportamento?
Dove sbaglio?

Una pagina di test per vedere il tutto in azione è disponibile qui.

Grazie a chi potrà svelarmi questo mistero.

Ho tamponato cambiando il codice JS così:

Codice:

---

var temp = new Array();

var els = document.getElementsByTagName('input');
                               
for( i = 0; i < els.length; i++){
  if( els[i].getAttribute('type') == 'checkbox' && els[i].checked ) {
    var k = els[i].value;

    temp[temp.length] = k;
                                        }
}
                               
for( i = 0; i < temp.length; i++){
  document.getElementById('u_' + temp[i]).remove();
}
                               
temp = [];

---

In sostanza prima memorizzo in un array gli da rimuovere e poi, con un secondo ciclo, rimuovo le righe.


La cosa sembra funzionare (qui risultato), ma rimane il dubbio sul perchè in un solo passaggio non funziona :confused:

Quando chiami getElementsByTagName, la funzione ti restituisce una HTMLCollection collegata al contenuto della pagina: quando cancelli un elemento, questo sparisce anche dalla collezione, aggiornando gli indici degli elementi che seguono. Quindi se cancelli un elemento in un normale ciclo, finisci per ignorare quello successivo.

Una soluzione è raccogliere gli elementi da cancellare in un altro array (quella che hai trovato tu), oppure eseguire le cancellazioni all'indietro, partendo dalla fine dell'array.

Vedi: https://developer.mozilla.org/en-US/...mentsByTagName