estaba practicando consumir una api y le estaba armando unas validaciones. El caso es que los ID de la api se guardan en un array para que despues no se repitan lo que aparece en pantalla. Le agregue un boton para poder eliminar lo visto en pantalla y queria que me elimine el numero del array, al borrar el primero no hay problema pero al querer borrar el siguiente es como si la funcion eliminar se ejecutara 2 veces, al tercero tres veces y asi, entonces me borra varios valores del array (tambien pueden verlo con el contador). Dejo el codigo.
let contenido = document.querySelector("#contenido");
let boton = document.querySelector("#boton");
let contador = 0;
let array = [];
let numero = 0;
let bandera = false;
const capturar = () => {
if (contador < 10) {
fetch("https://digimon-api.herokuapp.com/api/digimon")
.then(res => res.json())
.then(data => {
let numero = Math.floor(Math.random() * (100 - 1) + 1);
if (bandera == false) {
array.push(numero);
bandera = true;
console.log(array);
console.log(array.length);
} else if (bandera == true) {
numero = Math.floor(Math.random() * (100 - 1) + 1);
console.log(array.includes(numero));
while (array.includes(numero) == true) {
numero = Math.floor(Math.random() * (100 - 1) + 1);
}
array.push(numero);
}
console.log(array);
contenido.innerHTML += `<tr id="${numero}"><td scope="row">${data[numero].name}</th><td>${data[numero].level}</td><td><a id="imagen" data-toggle="modal"
data-target="#exampleModal${data[numero].id}"><img src="${data[numero].img}" widht="100px" height="100px" class="rounded-circle"> <div
class="modal fade"
id="exampleModal${data[numero].id}"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog text-body" role="document" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${data[numero].name}</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="${data[numero].img}" class="rounded-circle">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div></td><td><button class="btn btn-danger btn-eliminar" id="boton${data[numero].id}" onclick="eliminar()">X</td></tr>`;
contador++;
console.log(contador);
});
} else {
alert("No hay mas digimons por capturar!");
}
};
const eliminar = () => {
$(document).on("click", ".btn-eliminar", function() {
let row = $(this)
.parent()
.parent();
let id = parseInt(
$(this)
.parent()
.parent()
.attr("id")
);
let index = array.indexOf(id);
console.log(index);
array.splice(index, 1);
console.log(array);
$(row).addClass("hidden");
contador--;
console.log(contador);
});
};
boton.addEventListener("click", capturar);
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" />
<title>Digimon Partner</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="estilos/estilos.css">
</head>
<body>
<div class="container text-center">
<h1>Digimon Adventure Partner</h1>
<div class="container my-5">
<button class="btn btn-success" id="boton">Obtener Digimon</button>
</div>
<div class="mt-5">
<table class="table table-dark text-center">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Level</th>
<th scope="col">Picture</th>
</tr>
</thead>
<tbody id="contenido"></tbody>
</table>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="js/main-digimon.js"></script>
</body>
</html>