Как добавить удаление классов на чистом JS? [дубликат]

Есть вот такой вот JS-код:

var main = document.getElementsByClassName('intro__btn--main');
var bots = document.getElementsByClassName('intro__btn--bots');
var advertisement = document.getElementsByClassName('intro__btn--advertisement');
var par = document.getElementsByClassName('main');
// Добавляет класс main--main-bg к main
main[0].onclick = function () {
        par[0].classList.add("main--main-bg");
};
// Добавляет класс main--bots-bg к main
bots[0].onclick = function () {
        par[0].classList.add("main--bots-bg");
};
// Добавляет класс main--main-advertisement к main
advertisement[0].onclick = function () {
        par[0].classList.add("main--main-advertisement");
};

main[1].onclick = function () {
        par[0].classList.remove("main--advertisement-bg");
};
bots[1].onclick = function () {
        par[0].classList.remove("main--bots-bg");
};
advertisement[1].onclick = function () {
        par[0].classList.remove("main--advertisement-bg");
};

Сейчас он добавляет определенный класс при нажатии на ту или иную кнопку и его же удаляет лишь при нажатии на эту же кнопку, с помощью которой был добавлен. Как сделать, чтобы при добавлении класса удалялись ненужные? Т.е. чтобы был лишь основной класс - main и добавлялся модификатор, например, main--main-bg. Код на кодпене.