Как скрыть всю строку текста словами

Я пытался следовать формату, когда я прятал питомцев в своей игре, но получилось не так.

Как бы мне скрыть такую ​​строку? Я понимаю, как скрыть переключатель.

Я пробовал что-то похожее на то, что я делал для переключателей, но это не то же самое. как мне дать этим строкам текста/другим вещам имя, чтобы я мог скрыть их до тех пор, пока не будет выполнено условие?

Это мой текущий Javascript:

var Silver = document.getElementById('Silver');
var Gold = document.getElementById('Gold');
var Diamond = document.getElementById('Diamond');



function checkUnlockOre() {
    if (Mininglv >= 10) {
        Silver.style.visibility = 'visible'
    } else {
        Silver.style.visibility = 'hidden'
    }
     if (Mininglv >= 20) {
        Gold.style.visibility = 'visible'
    } else {
         Gold.style.visibility = 'hidden'
    }
    if (Mininglv >= 30) {
         Diamond.style.visibility = 'visible'
    } else {
        Diamond.style.visibility = 'hidden'
    }

}

checkUnlockOre()

HTML-код:

<div>
    <br />
    Bronze: <span id = "Bronze">0</span>
    <br />
    Silver: <span id = "Silver">0</span>
    <br />
    Gold: <span id = "Gold">0</span>
    <br />
    Diamond: <span id = "Diamond">0</span>
</div>

Я ожидаю, что руды не будут видны до тех пор, пока не будет выполнено условие, но в моем фактическом результате все они видны, и я не могу понять, как скрыть эти линии.