0

Quiero eliminar el resultado anterior de una consulta a una API de Spotify y que se quede la nueva consulta, el código que imprime la consulta en el DOM es este:

export function mostrarInfo(albumes){
     albumes.forEach(info => {
         if(info.album_type === 'album'){
          const infoArtista = {
               nombre: info.name,
               fecha: info.release_date,
               tracks: info.total_tracks,
               foto: info.images[0]
          }

          const div = document.createElement('div');
          div.classList.add('col-4');
          div.classList.add('mb-5');
          div.innerHTML = `
            <div class="card_group">
                <div class="card">
                    <img src="${infoArtista.foto.url}" class="card-img-top img-fluid">
                    <h2 class="titulo ml-2">${infoArtista.nombre}</h2>
                    <h4 class="ml-2">Tracks: ${infoArtista.tracks}</h4>
                    <p class="ml-2">Fecha de lanzamiento: <span class="badge badge-pill badge-warning">${infoArtista.fecha}</span>
                    </p>
                </div>
            </div>

          `;

          artistaContenido.appendChild(div);

         }
    }) 
}

Y el código donde quiero eliminar el resultado anterior es este:

 const resultado = document.querySelector('#artista_preferido_resultado div');
     if(resultado !== null){
            resultado.remove();
     } 

Con esto solo se elimina el primer div de la primera consulta e imprime el resultado de la segunda.

1
  • prueba cambiar donde dice const div = document.createElement('div'); a un select de un div existente así lo imprime siempre en el mismo div Commented el 11 ago. 2018 a las 4:20

1 respuesta 1

1

Intenta borrar todo el contenido del div donde muestras los albumes cada vez que vayas a mostrar un nuevo resultado:

var albumes = [
  { album_type: 'album', 
    name: 'Album 1', 
    release_date: '2018-08-11', 
    total_tracks: '5', 
    images:[
      'path'
    ]
  },
  { album_type: 'album', 
    name: 'Album 2', 
    release_date: '2018-08-11', 
    total_tracks: '5', 
    images:[
      'path'
    ]
  }
];
mostrarInfo(albumes);

function mostrarInfo(albumes){
     var al = document.getElementById('albumes');
     al.innerHTML="";
     albumes.forEach(info => {
         if(info.album_type === 'album'){
          const infoArtista = {
               nombre: info.name,
               fecha: info.release_date,
               tracks: info.total_tracks,
               foto: info.images[0]
          }

          const div = document.createElement('div');
          div.classList.add('col-4');
          div.classList.add('mb-5');
          div.innerHTML = `
            <div class="card_group">
                <div class="card">
                    <img src="${infoArtista.foto.url}" class="card-img-top img-fluid">
                    <h2 class="titulo ml-2">${infoArtista.nombre}</h2>
                    <h4 class="ml-2">Tracks: ${infoArtista.tracks}</h4>
                    <p class="ml-2">Fecha de lanzamiento: <span class="badge badge-pill badge-warning">${infoArtista.fecha}</span>
                    </p>
                </div>
            </div>
          `;

          al.appendChild(div);

         }
    }) 
}
<div id="albumes">
</div>

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.