problema eliminazione elementi array

[cablos]

Salve, ho la necessita di inserire in un array due valori prelevati da due campi di testo contemporaneamente alla visualizzazione degli stessi in una tabella.

l'inserimento degli elementi sembra funzionare bene, il problema si verifica quando tento di eliminarli, non sempre vengono eliminati correttamente (es. se aggiungo tre elementi e li elimino dall'ultimo inserito al primo vengono eliminati tutti correttamente, se elimino dal primo all'ultimo no)

vi linko l'esempio non funzionante


html

<input type="text" name="articolo" id="articolo" placeholder="ARTICOLO" size="25" /> 
<input type="text" name="descrizione" id="descrizione" placeholder="DESCRIZIONE" size="25" /> 
<input type="button" name="btnaddaccessorio" id="btnaddaccessorio" value="+" />




			<table id='tblaccessori' class='tablesorter'  border='0' cellpadding='0' cellspacing='1' style='width:400px;'>
				<thead>
					<tr>
						<th>ARTICOLO</th>
						<th>DESCRIZIONE</th>		
						<th></th> 
					</tr> 
				</thead> 
			<tbody>
			
			
			</tbody>
			</table>
 


<input type="button" name="btnverifica" id="btnverifica" value="verifica" />

javascript /jquery

<script>


	datiRiparazione= {};
	datiRiparazione["accessori_riparazione"] = [];
		
		<!-- aggiunto un accessorio (un elemento all'oggetto "accessorio") -->
		$('#btnaddaccessorio').click(function(){ 
		
		 accessorio = {};	
		 //prelevo i dati dalle 2 texbox 
		 accessorio['articolo'] = $("#articolo").val();
		 accessorio['descrizione'] = $("#descrizione").val();
		 
		 //aggiungo tutto all'array principale DatiRiparazione
		datiRiparazione['accessori_riparazione'].push(accessorio);
		
		
		//ricavo l'index dell'elemento appena aggiunto 
		var index = datiRiparazione['accessori_riparazione'].length -1;
		 
		 
		 var trHTML = '';
				
				
		 trHTML += "<tr  id='row-"+ index +"'><td>" + $("#articolo").val() + "</td><td>" + $("#descrizione").val() + "</td><td align='center'><img style='cursor:pointer;' src='../../include/icons/delete.png' onclick='eliminastato(" + index + ")' alt='Elimina' id='btnelimina' title='Elimina' border='0' /></td></tr>";


				
				
		 $('#tblaccessori').append(trHTML); 
		 
	


		 });


	</script>


	
	<script>
	


	
	function eliminastato(indice) {
	
	
	$('#row-' + indice).remove()
	
	
	
	datiRiparazione['accessori_riparazione'].splice(indice,1);
	
	
				


		
	}
	
	</script>
	
	
	<script>
	
	$("#btnverifica").click(function () {
	
	
	datiRiparazione["data"]= "22/02/2016";
	datiRiparazione["id_cliente"]= "Mario Rossi";
	datiRiparazione["id_dispositivo"]= "Notebook";
	datiRiparazione["difetto"]= "rotto";
	datiRiparazione["note"]= "";
	datiRiparazione["password"]= "1234";
	datiRiparazione["costo"]= "20";
	datiRiparazione["id_stato_riparazione"]= "preso in carico";
	
	
	alert(JSON.stringify(datiRiparazione));
	console.log(datiRiparazione);
	
	});
	
	
	
	</script>

spero di essere stato chiaro

grazie

[KillerWorm]

Ciao, c'è un'incongruenza nella logica di funzionamento.

In sostanza, l'indice delle righe nella tabella, quello che assegni quando aggiungi un articolo, non ha necessariamente una correlazione con l'indice delle voci nell'array, perché quest'ultimo viene ridefinito ogni volta che modifichi l'array stesso, in base all'ordine assunto dagli elementi dopo la modifica.

Come tu stesso hai appurato, quando la rimozione avviene dall'ultimo al primo articolo nella tabella, l'ordine dei due indici (della tabella e dell'array) risulterà corrispondente, ma questo è un caso su cui non puoi fare affidamento.
Infatti, se vai ad eliminare le righe in diverso ordine, per forza di cose gli indici (tra tabella ed array) ad un certo punto non corrisponderanno più tra loro, perché appunto l'indice degli elementi nell'array viene di volta in volta modificato.

Vedi tu come credi sia meglio intervenire.

Personalmente, alla rimozione delle righe sulla tabella, andrei semplicemente a ricreare l'intero array secondo ciò che risulta dalla tabella, così da evitare ogni possibile incongruenza.

Inoltre noto che, per rimuovere le righe della tabella, utilizzi un procedimento macchinoso, andando a richiamare la funzione eliminastato() alla quale passi l'indice definito per quella riga. In più il tutto è gestito attraverso l'evento onclick che definisci sui singoli tag.

Dal momento che usi jQuery vedo più semplice è funzionale assegnare l'evento via script con un unico selettore (anziché avere gestori di evento sparsi tra i tag) e gestire la rimozione delle righe attraverso un riferimento relativo del pulsante con la riga in cui sta (vedi l'uso della parola chiave this e del metodo parent() e simili). Chiaramente è giusto un consiglio.