javascript InnerHTML adding cards only one time

Question

I'm trying to add a bootstrap card inside a div called [ itemscontainer ] using javascript by document.getElementById("itemscontainer").innerHTML so i want the cards to be inserted inside the itemscontainer only one time like this:-

but the problem is the items cards keeps reapet them salves more than one time like:-

what i want is to clear the itemscontainer first before adding the cards and this is what i have tried so that the items will be only one cards for each item

// clear function
    function clear(){
        document.getElementById("ssst").innerHTML = ""
    }
    // listener append all items to the inventory
    window.addEventListener('message', (event) => {
        let data = event.data
        if(data.action == 'insertItem') {
            let name = data.items.name
            let count = data.items.count
            let icon  = data.items.icon
            if(document.getElementById("ssst").innerHTML == ""){
                clear()
            }else{
            document.getElementById("ssst").innerHTML += 
                "<div class='card holder'>"+
                        '<div class="card-body">'+
                            '<img src="icons\\'+icon+'" style="position:absolute;left:15%;width:40px; height:36px;" alt="">'+
                            '<h4 id="counter">'+count+'</h4>'+
                        '</div>'+
                        '<span class="itemname">'+name+'</span>'+
                '</div>";'
            }
        }
    })

Answer 1

The real solution is to figure out why you are getting the items more than once. With the information you provided that is impossible for me to answer. So the only thing we can recommend is how to prevent items from being added more than once.

If your messaging system returns duplicates you can determine if you have seen it. If you do, replace it. Otherwise add it.

 window.addEventListener('message', (event) => { const data = event.data; console.log(data) if (data.action == 'insertItem') { let name = data.items.name let count = data.items.count let icon = data.items.icon const html = ` <div class='card holder' data-name="${name}"> <div class="card-body"> <img src="icons/${icon}" style="position:absolute;left:15%;width:40px; height:36px;" alt="${icon}"> <h4 id="counter">${count}</h4> </div> <span class="itemname">${name}</span> </div>`; const elemExists = document.querySelector(`[data-name="${name}"]`); if (elemExists) { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); elemExists.replaceWith(doc.body); } else { document.getElementById("ssst").insertAdjacentHTML("beforeend", html); } } }); window.postMessage({ action: 'insertItem', items: { name: 'foo', count: 1, icon: 'foo' } }); window.postMessage({ action: 'insertItem', items: { name: 'bar', count: 40, icon: 'barrrrrr' } }); window.postMessage({ action: 'insertItem', items: { name: 'foo', count: 1000, icon: 'foo' } });

 <div id="ssst"></div>

Answer 2

Why are you using the if statement, what are you checking for?

remove the if statement, I can't see the reason for it to be used here.

clear()

and the rest of your code.