Delete row tabella

[xares]

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)

<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 è

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.

[xares]

Ho tamponato cambiando il codice JS così:

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

[badaze]

In questo modo. Quando si tratta di cancellare qualcosa in html al 99% bisogna cominciare dall'ultimo elemento non dal primo.

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