Edición de un elemento individual en JavaScript

Ahora aprenderemos a editar textos de elementos utilizando campos de entrada. Comenzaremos con cosas simples y gradualmente las haremos más complejas.

Así que, supongamos que tenemos un párrafo y un input, ubicados en un mismo elemento padre:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Hagamos que al perder el foco en el input, su texto aparezca en el párrafo:

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

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Ahora hagamos que al cargar la página, el input ya contenga el texto del párrafo. De esta manera, podremos utilizar el input para editar el texto ubicado en el párrafo.

Implementémoslo:

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

input.value = elem.textContent; // escribimos en el input el texto del párrafo

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Modifique el código anterior para que el texto del párrafo cambie no al perder el foco, sino a medida que se ingresa texto en el input.

Aparición del input

Ahora hagamos que inicialmente el input no esté en la página, sino que aparezca al hacer clic en el párrafo. Es decir, nuestro HTML inicial se verá así:

<div id="parent">
	<p id="elem">text</p>
</div>

Para empezar, simplemente implementemos la aparición del input, sin la edición:

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

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

Y ahora hagamos que al perder el foco en el input, cambie el texto del párrafo:

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

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

Sin embargo, nuestro código es imperfecto, ya que cada clic en el párrafo provocará la aparición de un nuevo input.

Para resolver el problema, simplemente al perder el foco eliminaremos el input actual:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // eliminamos el input
	});
	
	elem.parentElement.appendChild(input);
});

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