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.