Ocultar texto al editar un elemento en JavaScript

Ahora hagamos que al editar el campo de entrada aparezca en el mismo párrafo - en lugar del texto de este párrafo. Que luego, al terminar la edición, el campo de entrada desaparezca, y en su lugar aparezca nuevamente el texto del párrafo.

Procedamos con la implementación.

Para empezar, hagamos que al hacer clic en el párrafo se agregue un campo de entrada al final del mismo con el texto de este párrafo:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
});

Sin embargo, nuestro código es muy imperfecto - cada vez que se haga clic en el párrafo se agregará un nuevo campo de entrada.

Además, si en el primer campo de entrada está el texto del párrafo, en el segundo campo de entrada ya estará el texto del párrafo junto con el primer campo de entrada, y en el tercer campo de entrada ya estará el texto del párrafo junto con dos campos de entrada y así sucesivamente.

También presten atención a que un clic en el campo de entrada agregado se interpretará como un clic en el párrafo: el problema es que el campo de entrada se encuentra dentro del párrafo, y el clic en el campo de entrada simplemente se propagará hacia arriba a este párrafo.

Esto llevará a que después de la aparición del primer campo de entrada, al intentar hacer clic en él para comenzar la edición, automáticamente haremos clic en el párrafo con todas las consecuencias que ello conlleva.

En resumen, el problema está planteado. Ahora vamos a solucionarlo.

Para ello, simplemente cuando aparezca el campo de entrada, desvincularemos del párrafo el manejador del clic. En este caso solo el primer clic en el párrafo llevará a la aparición del campo de entrada, y los demás clics, realizados después de la aparición del campo de entrada, serán ignorados.

Implementemos:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // desvinculamos el evento
});

Ahora hagamos que cuando aparezca el campo de entrada, el texto del párrafo desaparezca. Para ello antes de insertar el campo de entrada, asignemos a textContent del párrafo una cadena vacía:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // primero escribimos el texto del párrafo en el campo de entrada
	elem.textContent = ''; // luego quitamos el texto del párrafo
	elem.appendChild(input); // luego insertamos el campo de entrada
	
	elem.removeEventListener('click', func);
});

Ahora hagamos que al perder el foco en el campo de entrada, el texto de este campo de entrada se escriba en el párrafo:

let elem = document.querySelector('#elem');

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.removeEventListener('click', func);
});

Tengan en cuenta que no necesitamos eliminar el campo de entrada - él se elimina solo cuando escribe su texto en el párrafo: dado que el campo de entrada es parte del texto del párrafo, el hecho de escribir algún texto en este párrafo simplemente elimina nuestro campo de entrada, y listo.

Sin embargo, tenemos un problema más: el texto del párrafo se editará solo la primera vez. Después de la primera edición, al hacer clic nuevamente en el texto del párrafo no pasará nada.

El problema es que en el momento de aparición del campo de entrada desvinculamos el evento del párrafo por las razones mencionadas anteriormente. Ahora necesitamos en el momento de finalizar la edición volver a vincular el evento.

Hagamos esto:

let elem = document.querySelector('#elem');

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); // volvemos a asignar el evento
	});
	
	elem.removeEventListener('click', func);
});

Resuelvan de forma independiente, sin mirar mi código, la tarea descrita.