0

ando buscando la forma de poder crear un boton que pueda eliminar el contenido de un array que se va llenando con DOM, aún no pude hacerlo, podrian asesorarme en que estoy haciendo mal? Como sería la forma correcta de hacer funcionar el boton para vaciar el array? HTML:

    <section class="historialLista">  
  <ul id="historial">
    <li class="impuestoActual"></li>
    <h3>Resultados guardados hasta el momento: </h3>
  </ul>
  <button class="borrarResultados">Limpiar resultados</button>
</section>

JS:

const historialresultados = [] // Array que se llena mediante DOM

const borrarResultados = document.querySelector('.borrarResultados');
const historialderesultados = document.getElementById('historial');

function borrar (e){
    historialresultados.splice(e, 1);
}

borrarResultados.addEventListener('click', () =>{
    e.preventDefault();
    borrar();
})
3
  • ¿No será que la constante es historialderesultados y en la función colocaste historialresultados?
    – lsanchezo
    el 31 may. 2022 a las 16:59
  • Al manejador de evento click no le estás pasando como argumento e. Supongo que te dará un error de referencia. Lo mismo pasa con la llamada a borrarque haces dentro de dicho manejador, allí el error sería de tipo TypeError, ya que splice no es un método de undefined. el 31 may. 2022 a las 17:00
  • Soy bastante novato con Js.. apenas llevo un mes, podrian mostrarme un ejemplo de como quedaría de ser posible? Muchas gracias el 31 may. 2022 a las 17:13

1 respuesta 1

0

Si quieres vaciar totalmente el array independientemente de los elementos que haya, puedes hacer directamente con el length.

const historialresultados = ["hola","que tal","hola2"];  // Array que se llena mediante DOM

const borrarResultados = document.querySelector('.borrarResultados');
const historialderesultados = document.getElementById('historial');

console.log(historialresultados); 

function borrar (){
    // historialresultados.splice(e, 1);
    historialresultados.length = 0; 
}

borrarResultados.addEventListener('click', (e) =>{
    e.preventDefault();
    borrar();
    console.log("arreglo borrado", historialresultados); 
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section class="historialLista">  
        <ul id="historial">
          <li class="impuestoActual"></li>
          <h3>Resultados guardados hasta el momento: </h3>
        </ul>
        <button class="borrarResultados">Limpiar resultados</button>
      </section>
</body>

<script src="./script.js"></script>

</html>

Lo que si debes tener en consideración es que si tienes más de 1 referencia al mismo array, usando el length vas a vaciar el array y todas las referencias al mismo.

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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