Редактиране на отделен елемент в JavaScript

Сега ще се научим да редактираме текстове на елементи с помощта на входни полета. Ще започнем с прости неща и постепенно ще усложняваме.

И така, нека имаме даден параграф и вход, разположени в един родител:

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

Нека направим така, че при загуба на фокус във входа, неговият текст да се появи в параграфа:

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

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

Сега нека направим така, че при влизане в страницата, във входа вече да има текст от параграфа. По този начин ще можем чрез входа да редактираме текста, намиращ се в параграфа.

Нека го реализираме:

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

input.value = elem.textContent; // записваме във входа текста на параграфа

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

Модифицирайте горния код така, че текстът на параграфа да се променя не при загуба на фокус, а при въвеждане на текст във входа.

Появяване на вход

Сега нека направим така, че първоначално да няма вход на страницата, а той да се появи при кликване върху параграфа. Тоест нашият начален HTML ще изглежда така:

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

Първо, нека просто реализираме появата на вход, без редактиране:

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

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

А сега нека направим така, че при загуба на фокус във входа, да се променя текстът на параграфа:

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);
});

Нашият код обаче не е съвършен, тъй като всяко натискане върху параграфа ще доведе до появата на нов вход.

За решаване на проблема, просто при загуба на фокус ще премахваме текущия вход:

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(); // премахваме входа
	});
	
	elem.parentElement.appendChild(input);
});

Самостоятелно, без да надничате в моя код, решете описаната задача.