1

Estoy creando una página de productos de videojuegos, con JS generé el HTML de cada producto.

El tema es, quiero poder ordenar cada producto y generarlo, pero al hacerlo, se muestra la lista de productos ordenada, y también la generada por default.

  • ¿Cómo puedo eliminar ese HTML generado anteriormente?

Ya intenté por ejemplo con seccionJuegos.removeChild(contenedor), pero me toma como que el contenedor no existe.

Código Javascript:

// CLASES

let entrada = parseInt(prompt('¿Cómo desea ordenar los videojuegos? \n 1: A-Z \n 2: Z-A \n 3: Menor precio \n 4: Mayor precio'));

// Creamos clase para los videojuegos
class Juego {
    constructor(nombre, id, genero, precio) {
        this.nombre = nombre;
        this.id = id;
        this.genero = genero;
        this.precio = precio;
    }
}

// ARRAYS

// Creamos el array de videojuegos

const juegos = [];
juegos.push(new Juego('FIFA 21', 1, 'deportes', 59.99));
juegos.push(new Juego('Call of Duty: Cold War', 2, 'fps', 69.99));
juegos.push(new Juego("Assassin's Creed: Valhalla", 3, 'aventura', 89.99));
juegos.push(new Juego('Cyberpunk 2077', 4, 'aventura', 29.99));
juegos.push(new Juego('Battlefield V', 5, 'fps', 59.99));
juegos.push(new Juego('The Last Of Us II', 6, 'horror', 59.99));
juegos.push(new Juego('Resident Evil VIII', 7, 'horror', 79.99));
juegos.push(new Juego('Red Dead Redemption 2', 8, 'acaventura', 29.99));
juegos.push(new Juego('PES 2021', 9, 'deportes', 19.99));
juegos.push(new Juego('ARK', 10, 'aventura', 69.99));
juegos.push(new Juego('HALO: Infinite', 11, 'fps', 89.99));
juegos.push(new Juego('Animal Crossing', 12, 'simulador', 49.99));
juegos.push(new Juego('GTA V', 13, 'accion', 39.99));
juegos.push(new Juego('Uncharted 4', 14, 'aventura', 39.99));
juegos.push(new Juego('Minecraft', 15, 'aventura', 19.99));
juegos.push(new Juego('Age Of Empires IV', 16, 'estrategia', 39.99));
juegos.push(new Juego('Dragon Ball Xenoverse', 17, 'accion', 19.99));
juegos.push(new Juego('Chivalry II', 18, 'accion', 79.99));
juegos.push(new Juego('Far Cry 6', 19, 'aventura', 89.99));
juegos.push(new Juego('God Of War IV', 20, 'aventura', 49.99));

const seccionJuegos = document.getElementById('games');

for(const juego of juegos) {
    crearCard(juego);
}

// FUNCIONES

contenedor = '';
function crearCard(objeto) {
    contenedor = document.createElement('article');
    contenedor.classList.add('game');
    contenedor.innerHTML = `<img class="game__img" src="img/games/game${objeto.id}.jpg" alt="${objeto.nombre}">
                            <h2 class="game__title">${objeto.nombre}</h2>
                            <div>
                                <p class="game__price">Price: ${objeto.precio}$</p>
                                <button class="game__button" type="button">Add to Cart</button>
                            </div>`
    seccionJuegos.appendChild(contenedor);
}

Código HTML:

<section class="games" id="games">
    <!-- JUEGO 1 -->          
</section>
1
  • 1
    @JuanRivera ahí lo escribí Commented el 22 may. 2021 a las 14:45

2 respuestas 2

2

Si seccionJuegos apunta al elemento cuyo contenido quieres borrar:

seccionJuegos.innerHTML='';

Si no hay que ponerlo en una variable:

var gamesDiv = document.getElementById('games'); // el id del elemento cuyo contenido vas a borrar
gamesDiv.innerHTML='';
1
1

Por una cuestion de claridad y mantenibilidad, te recomendaría cambiar la forma de definir e instanciar las clases. Lo haría de esta manera:

// Creamos clase para los videojuegos
class Juego {
    constructor(props) {
        this.nombre = props.nombre;
        this.id = props.id;
        this.genero = props.genero;
        this.precio = props.precio;
    }
}

// ARRAYS

// Creamos el array de videojuegos

const datos_juegos = [
    {
        nombre: 'FIFA 21',
        id: 1,
        genero: 'deportes',
        precio: 59.99,
    },
    {
        nombre: 'Call of Duty: Cold War',
        id: 2,
        genero: 'fps',
        precio: 69.99,
    },
    {
        nombre: "Assassin's Creed: Valhalla",
        id: 3,
        genero: 'aventura',
        precio: 89.99,
    },
    {
        nombre: 'Cyberpunk 2077',
        id: 4,
        genero: 'aventura',
        precio: 29.99,
    }
]


let juegos = datos_juegos.map(datos => new Juego(datos));

Por otro lado, el nombre "contenedor" suele usarse para el contenedor de la aplicación. Podría resultar poco claro.

Ahora sí, para poder eliminar el html deberías ubicar todo ese html en un div con el id del juego.

function crearCard(objeto) {
    let card = document.createElement('article');
    card.classList.add('game');
    card.innerHTML = `<div id=${objeto.id}
                        <img class="game__img" src="img/games/game${objeto.id}.jpg" alt="${objeto.nombre}">
                        <h2 class="game__title">${objeto.nombre}</h2>
                        <div>
                            <p class="game__price">Price: ${objeto.precio}$</p>
                            <button class="game__button" type="button">Add to Cart</button>
                        </div>
                    </div>`
    seccionJuegos.appendChild(card);
}

Para eliminar el objeto por su id:

function deleteCard(id){
    let card = document.getElementById(id);
    card.parentNode.removeChild(card);
}
1
  • Genial muchas gracias, estoy empezando con la programación y me sirven esos consejos :) Commented el 22 may. 2021 a las 15:32

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.