Desvinculación de manejadores de eventos en un bucle en JavaScript

Supongamos que ahora no tenemos un solo elemento, sino varios. Por ejemplo, varios párrafos:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Vamos a asignar a cada uno de estos párrafos la función func como manejador de clics:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

Ahora modifiquemos el código para que cada párrafo solo reaccione al primer clic sobre él. Para ello, al hacer clic en un párrafo desvincularemos el manejador asignado. Esta desvinculación será específica de este párrafo, sin afectar a los demás.

Como ya sabes, el elemento en el que ocurrió el evento se puede obtener en la función manejadora a través de this. Esto significa que es necesario realizar la desvinculación del manejador de this, así:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // desvinculamos el manejador
}

Se dan párrafos. Al hacer clic en cualquiera de los párrafos agregue al final del mismo un signo de exclamación. Haga que este agregado ocurra solo en el primer clic.