Me vendría bien un poco de ayuda. Tengo un botón y, al hacer clic, genera una broma usando la API de bromas de papá y Axios. Sin embargo, no puedo descifrar cómo deshacerme de la vieja broma cuando vuelvo a hacer clic en el botón. Aquí está mi código. Gracias
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>necesita almacenar los chistes entrantes en una matriz para verificar los duplicados. prueba esto
function getJoke() { const p = axios .get('https://icanhazdadjoke.com/', { headers: { "Accept": "text/plain" }, }) .then((response) => { const joke = response.data const jokesArr = []; // stores joke history jokesArr.push(joke); // checkes the repeated joke in jokes history const jokeCheck = (joke) => { const currentItemCount = jokesArr.filter(val => val=== joke).length; if(currentItemCount > 0) { p(); } return joke; } const currentJoke = jokeCheck(joke); const jokeContainer = document.querySelector('.joke'); const blockquoteEl = document.createElement('blockquote'); blockquoteEl.append(currentJoke); jokeContainer.appendChild(blockquoteEl); }) .catch((error) => { const jokeContainer = document.querySelector('.joke'); jokeContainer.innerText = 'Joke not found :('; }); }Lo que debe hacer es usar las funciones heredadas por los elementos dom para eliminar el nodo secundario:
<body> <div class="joke"> <button>Click if you want a cringe joke</button> </div> <script> 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'); jokeContainer.removeChild(jokeContainer.childNodes[2]); const blockquoteEl = document.createElement('blockquote'); blockquoteEl.append(joke); jokeContainer.appendChild(blockquoteEl); }).catch((error) => { const jokeContainer = document.querySelector('.joke'); jokeContainer.innerText = 'Joke not found :('; }); } </script> </body>