Как я могу использовать getElementsByClassName(<имя класса>).outerHTML="", чтобы скрыть <имя класса><div>, когда для класса div существует несколько имен?

Для занятий вы можете использовать document.querySelectorAll() наряду с селекторами css, такими как этот:

document.querySelector('button').addEventListener('click', () => {
  document.querySelectorAll('.cake')[0].style.display = 'none';
});

<div class="cake forest carousel">Some content I want to hide.</div>
<button>Hide content</button>

С именами классов помните, что вы можете указать ВСЕ имена классов (иногда это полезно для определения одного элемента, если есть другие элементы, которые содержат часть списка классов:

document.querySelectorAll('.cake.forest.carousel')[0] . . .

Также обратите внимание, что document.querySelectorAll() возвращает коллекцию, а не строку - вот почему необходимо использовать [0] обозначение для выбора первого элемента, возвращаемого в коллекции.

С помощью getElementsByClassName() это почти та же идея - опять же, она возвращает коллекцию, и нужно либо использовать [0] обозначение для получения первого элемента (обычно, если возвращается только один) или forEach() цикл для выбора нужного элемента на основе других критериев.

document.querySelector('button').addEventListener('click', () => {
  document.getElementsByClassName('cake forest')[0].style.display = 'none';
});

<div class="cake forest carousel">This div has classes cake, forest and carousel</div>
<div class="cake">This div only has class cake</div>
<button>Hide divs with classes cake AND forest</button>