Quiero que mi usuario presione un botón para "asistir", luego muestre un "gracias" y elimine el botón.

Aquí está mi botón:

 <div class="col-6 offset-3"> <form action="/events/<%= event._id%>/guests" method="POST" novalidate class="needs-validation"> <div class="d-grid gap-2 col-6 mx-auto mb-2"> <button id="attendingBtn" onclick="buttonDisappear()" class="btn btn-primary mb-3">I'm attending</button> </div> </form> </div>

Cuando uso remove() en mi función (abajo), el botón desaparece después de hacer clic en él, pero no llega a la ruta ni envía datos a mi base de datos:

 function buttonDisappear() { document.getElementById("attendingBtn").remove(); }

Pero cuando uso style.display = none; el botón desaparece hasta que la página se vuelve a cargar y el botón vuelve.

 function buttonDisappear() { document.getElementById("attendingBtn").style.display = 'none'; }

Esto se debe a que tengo un res.redirect de regreso a la página en mi función (abajo).

 module.exports.addGuest = async (req, res) => { const event = await Event.findById(req.params.id); const guest = new Guest(req.body.guest); event.guests.push(guest); await guest.save(); await event.save(); res.redirect(`/events/${event._id}`); }

¿Cómo obtengo el botón para publicar datos y luego hago que la tarjeta muestre un "gracias" o simplemente hago que el botón desaparezca?