javascript - 动态创建的列表正在重复

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." },
];

这会创建这样的东西:

如果我点击离开商店，它会隐藏商店。如果我然后点击进入商店，它就会变成这样:

如您所见，药水已被复制。如果我再做一次，就会出现三个，依此类推。 有人可以帮我让它只显示一个吗？

Answer 1

解决了!

我向 list 项本身添加了 id，而不是其内容，然后稍后将其销毁。