Reemplace la etiqueta de anclaje con un span o div o p

Tengo una funcionalidad en la que una vez que el usuario hace clic en un enlace, se realiza una solicitud ajax y, si se realiza la solicitud, el enlace ya no se puede hacer clic.

Esto es lo que estoy usando para lograr esto:

$('a[id^="rsvp_"]').click (function (e) {
    e.preventDefault();
    $.post(
        $(this).data('url'),
        function(data) {
            $(this).replaceWith(function(){
                alert (data);
                return $("<span>" + data + "</span>");
            });
        }
    );
})  ;

Este código se aplicará a cualquier ID que comience conrsvp_ . Todo parece funcionar incluyendo elalert(data) Sin embargo, la etiqueta de anclaje todavía permanece allí. Simplemente quiero reemplazar la etiqueta de anclaje a otra cosa.

El fragmento de HTML se ve así

<a id="rsvp_${event.id}" href="#" data-url="${createLink(action: 'myaction', params: ["eventid": event, "userid": user])}">Click to RSVP</a>

Actualizar

Tenga en cuenta que tengo varios enlaces como este en la página, es decir,rsvp_1, rsvp_2, rsvp_3 ..etc

Solo quisiera eliminar la etiqueta de anclaje en el enlace en el que el usuario hizo clic. No todos los enlaces en la página.

Respuestas a la pregunta(4)

Su respuesta a la pregunta