Using Axios to post a joke on click ( 1 at a time )

I could use some help.
I have a button and on click, it generates a joke using dad jokes API and Axios. However, I can’t figure out how to get rid of the old joke when I click on the button again. Here is my code. Thanks

let button = document.querySelector(‘button’)
button.addEventListener(“click”, getJoke)

 function getJoke() {
const p = axios
.get('https://icanhazdadjoke.com/', { headers: { "Accept": "text/plain" },  
 })


 .then((response) => {
const joke = response.data

const jokeContainer = document.querySelector('.joke'); 

const blockquoteEl = document.createElement('blockquote');

blockquoteEl.append(joke);

jokeContainer.appendChild(blockquoteEl);
 })
  .catch((error) => {
const jokeContainer = document.querySelector('.joke');
jokeContainer.innerText = 'Joke not found :(';

  });

  }




 <div class="joke">
    <button>Click if you want a cringe joke</button>
  </div>