动态创建的列表正在重复

Question

我有一个Javascript函数，可以根据对象填充（Javascript）数组添加项目。

这里添加项目的功能如下：

function appendShopItem(shopItem)
{
    // Create the list item:
    item = document.createElement( 'li' );

    // Set its contents:
    item.appendChild( document.createTextNode( 
        shopItem.name + ' - ' + shopItem.cost + ' Gold'
    ) );

    // Add it to the list:
    list.appendChild( item );

    var radio = document.createElement( 'button' );
    var text = document.createTextNode( "Buy " + shopItem.name + " for " + shopItem.cost + " Gold");
    radio.name = 'shop';
    radio.value = shopItem.name;
    radio.id = "shop";
    radio.style.display = "inline-block";
    radio.style.textAlign = "left";
    radio.onclick = function () {
        addValue( shopItem );
    };

    var lineBreak = document.createElement("BR");
    document.body.appendChild(lineBreak);
    radio.appendChild( text );
    document.getElementById("centeredDiv").appendChild( radio );
}

shopItem将是数组中的对象，例如：

shopItems = [
    { name: "Potion", cost: 10, description: "A healing liquid." },
];

这会产生如下内容：

如果我点击Leave Shop，它会隐藏商店。如果我然后点击Enter Shop，则会变为：

如您所见，Potion已被复制。如果我再次这样做，则会出现三个，依此类推。 有人可以帮助我，只显示一个吗？

Answer 1

<强>解决！

我在id项目本身添加了list，而不是contents，然后将其销毁。