0

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">&times;</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>

1
  • No entiendo mucho la lógica ni cómo reproducir el problema. Parecería que lo que hace falta es: 1. Hacer la llamada a la API y guardar la respuesta completa; 2. Entre los objetos escoger uno de forma aleatoria y mostrarlo; 3. Al pulsar en el botón eliminar, quitar el elemento actual del objeto que tiene los elementos, escoger y otro y mostrarlo... y así sucesivamente. No sé si entendí bien. Si es así, no veo esa lógica reflejada.
    – A. Cedano
    Commented el 14 mar. 2020 a las 19:17

2 respuestas 2

0

no se si he entendido bien, pero si le quitas el const eliminar, deberia funcionar, porque estas llamando a una funcion 2 veces, en eliminar, y en

$(document).on("click")

Si con el function que comenta jonathan no te elimina el numero de array al que clickas, prueba borrando directamente el const eliminar, dejandolo asi:

 $(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);
  });
2
  • comenta si funcionó
    – JorgeD
    Commented el 14 mar. 2020 a las 19:33
  • Gracias por tu respuesta! Estoy tratando de implementar arrow functions y realmente olvide que agregue cuando empece a usar jquery. Ya funciona correctamente Commented el 14 mar. 2020 a las 19:34
0

Estas agregando un listener aun cuando ejecutas la función desde el botón, modifícalo de esta forma; la funcion se va a ejecutar al hacer click en él

function eliminar () {
    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);
}
1
  • Gracias por tu respuesta, efectivamente me soluciono el problema de borrar en el array solo que no habia visto donde la llamaba dos veces a la funcion. Gracias nuevamente Commented el 14 mar. 2020 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.