how to remove text added in a modal from an object after closing it

I'm a beginner and I'm trying to add random jokes to a modal from an object. Until now everything works. What I want now is to clear the modal after I click the close button so that every time I click "lets have a laugh..." a new joke will appear without having to refresh the page.

Other suggestions to make the code cleaner are welcome.

const JokesObject = {
joke1: {
    question: "what is the ultimate paradox",
    answer: "There is no absolute truth"
},
joke2: {
    question: "what turns coffee into code",
    answer: "A programmer"
  }
};

function jokie () {

const ListJokes = Object.keys(JokesObject);
let randomJoke = ListJokes[Math.floor(Math.random() * ListJokes.length)];   
const joke = JokesObject[randomJoke];

const jokeModalQuestion = document.getElementById('joke');
const jokeModalAnswer = document.getElementById('answer');
const addJoke = document.createTextNode(joke.question);
const addAnswer = document.createTextNode(joke.answer);

jokeModalQuestion.appendChild(addJoke);

function answer () {
    jokeModalAnswer.appendChild(addAnswer);
 };

document.getElementById('giveAnswer').addEventListener('click', answer)
};

jokie();

const toggleModal = () => {
document.querySelector('.modal').classList.toggle('modal-hidden');
};

document.querySelector('.show-modal').addEventListener('click', toggleModal);

document.querySelector('.modal__close-bar').addEventListener('click', toggleModal);