Estoy imitando una página de detalles de preguntas de desbordamiento de pila donde un usuario tiene la capacidad de eliminar su propia respuesta a una pregunta en particular. La página tiene un elemento que representa el recuento total de respuestas publicadas (0 respuestas, 1 respuesta, 2 respuestas, etc...). Una vez que un usuario hace clic en <p class="delete_answer">delete</p> , se envía una solicitud AJAX a la API, se elimina el modelo y la API devuelve una respuesta de código de estado 204.

El resultado deseado después de recibir la respuesta es disminuir el recuento de respuestas en 1 punto. Sin embargo, el resultado real disminuye el contador de respuestas en 2 puntos. Si hay 1 respuesta y se elimina, pasará de 1 respuesta a -1 respuesta, pero se supone que son 0 respuestas.

Entonces parece que el controlador de eventos se invoca dos veces. ¿Qué está causando que esto ocurra y cómo se puede remediar para que el conteo disminuya en 1?

 let posted_question_answers = document.querySelectorAll(".delete_answer"); posted_question_answers.forEach((answer) => { answer.addEventListener("click", function(event) { const question_answer = this.id; console.log(question_answer); let [question_id, answer_id] = Array.from(question_answer.matchAll(/(?<=\w+)\d+/g)); console.log(question_id, answer_id); var answer_vote = question_answer.split("__")[1]; const [answer, vote] = answer_vote.split("_") const request = new Request( `http://localhost:8000/api/v1/questions/${question_id}/answers/${answer_id}/`, { 'method': 'delete', 'headers': headers } ); fetch(request).then((response) => { this.parentElement.parentElement.parentElement.parentElement.remove(); let answer_count = document.getElementById("answer_count"); const n = parseInt(answer_count.textContent[0]) - 1; console.log(n) let answers; if (n > 1 || n == 0) { answers = ` answers`; } else { answers = ` answer`; } answer_count.textContent = `${n} ${answers}` }) }) })