Edição em grupo de elementos em JavaScript

Suponha que agora temos não um parágrafo, mas vários:

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

Vamos fazer com que ao clicar em qualquer parágrafo, apareça um campo de entrada para edição.

Na verdade, essa tarefa não é difícil para nós, pois quase todo o código foi obtido na lição anterior.

Para resolver nossa tarefa, simplesmente executaremos um loop pelos parágrafos e no loop usaremos o código da lição anterior (esse código nem precisará ser alterado):

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

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

Dada a tag ul. Faça com que ao clicar em qualquer li apareça um campo de entrada, com o qual será possível editar o texto dessa li.

Dada uma tabela HTML. Faça com que ao clicar em qualquer célula, apareça um campo de entrada para editar o texto dessa célula.