Desvinculando manipuladores de eventos em loop em JavaScript

Suponha que agora temos não um elemento, mas vários. Por exemplo, vários parágrafos:

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

Vamos vincular a função func a cada um desses parágrafos como um manipulador de clique:

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

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

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

Agora, vamos modificar o código para que cada parágrafo reaja apenas ao primeiro clique nele. Para isso, ao clicar em um parágrafo, desvincularemos o manipulador associado a ele. Dessa forma, o desvinculamento será específico para esse parágrafo, sem afetar os demais.

Como você já sabe, o elemento no qual o evento ocorreu pode ser obtido na função manipuladora através de this. Isso significa que precisamos executar o desvinculamento do manipulador de this, assim:

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 o manipulador
}

Existem parágrafos. Ao clicar em qualquer um dos parágrafos, adicione um ponto de exclamação ao final dele. Faça com que esta adição ocorra apenas no primeiro clique.