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 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

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.