How to remove the default action from a link using preventDefault?

Question

JavaScript

By default, the choiceCity link has #, how to remove # when clicked using preventDefault? No matter what # is added to the url.

const choiceCity = document.querySelector(".choice-city");
const modalCity = document.querySelector("#modalCity");
const citiesClose = document.querySelector(".cities-close");
const citiesListItem = document.querySelector(".cities-list-item");
const citiesListItemHref = document.querySelector(".cities-list-item").href;

//Фукция открытия модального окна
function toggleModal(){
  modalCity.classList.toggle("is-open");
}

//Проверка на идентичность урла и адреса ссылки, если похожи - вешаем класс.
if(window.location.href === citiesListItemHref){
  citiesListItem.classList.add("active-city");
}

//Добавляем "слушателя".
choiceCity.addEventListener("click", toggleModal);
citiesClose.addEventListener("click", toggleModal);

Answer 1

function toggleModal(event){
event.preventDefault();
modalCity.classList.toggle("is-open");
}

Answer 2

To cancel the default action for an event, you need to execute preventDefault on it. Judging by the question, you know about it. What causes difficulties?