Estoy buscando eliminar un elemento de un array cuando presiono un boton y que luego se vea reflejado en una tabla que tengo creada.
Mi codigo html es el siguiente:
<div id="SolicitudesPendientes">
<h3>Solicitudes pendientes</h3>
<table border="1" id="tablaSolicitudesPendientes"></table>
</div>
Mi codigo js es el siguiente:
let contadorDeSolicitudes=0
class Solicitud{
constructor (unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado){
this.id=contadorDeSolicitudes
this.tipoMercaderia=unTipoMercaderia
this.descripcion= unaDescripcion
this.puertoOrigen= unPuertoOrigen
this.cantidadContenedores= unaCantidadContenedores
this.estado=unEstado
contadorDeSolicitudes++
}
}
function listarSolicitudesPendientes(){
let tabla = document.querySelector("#tablaSolicitudesPendientes");
let tablaHTML = "<tr><td>Tipo de mercancia</td><td>Puerto de origen</td><td>Cantidad de contenedores</td><td>Descripcion</td><td>Id de solicitud</td><td>Cancelar</td></tr>";
for(let solicitud of listaSolicitudes){
tablaHTML += `<tr>
<td>${solicitud.tipoMercaderia}</td>
<td>${solicitud.puertoOrigen}</td>
<td>${solicitud.cantidadContenedores}</td>
<td>${solicitud.descripcion}</td>
<td>${solicitud.id}</td>
<td><input type="button" value="Cancelar" onClick=cancelarSolicitud(${solicitud.id}) ></td>
</tr>
`
}
tabla.innerHTML = tablaHTML;
}
function cancelarSolicitud(unId){
for (let solicitud of listaSolicitudes){
if(solicitud.id == unId){
listaSolicitudes.splice(unId)
listarSolicitudesPendientes()
}
}
}
let listaSolicitudes=[]
function agregarSolicitud
(unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado){
let unaSolicitud = new Solicitud(unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado);
listaSolicitudes.push(unaSolicitud);
}
function precargarDatos(){
agregarSolicitud("CARGA_GENERAL","manzanas","BSA",8,"pendiente");
agregarSolicitud("REFRIGERADO","carne","USA",3,"pendiente");
agregarSolicitud("CARGA_PELIGROSA","ceramicas","BSA",20,"pendiente");
}
El problema que estoy encontrando es que si presiono el boton de cancelar el elemento con id 1 tambien se elimina el elemento con id 2 porque una vez que se elimina el id 1 el 2 pasa a tener id 1.