Необходимо, чтобы с каждым сохраненным тегом была кнопка удаления. Как ее вставить грамотно и связать с функцией remove?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<button onclick='return upload()' id='save_button'>Save</button>
<br/>
<input
id='tags_area'
type='text'
autoComplete='off'
placeholder='Add a tag'
onchange='return updateTag()'
/>
</form>
<span id='result'></span>
<script src="index.js"></script>
</body>
</html>
var tag = '';
var tags_area = document.getElementById('tags_area');
var change = false;
function updateTag() {
tag = tags_area.value;
}
function upload() {
localStorage.setItem(tag, tag);
}
var data = window.localStorage;
var result = document.getElementById('result');
var arr = Object.keys(data).map((key) => data.getItem(key));
result.innerHTML = arr.map(x => x + '<button onclick="return remove(x)">Delete</button>').join('<br>');
function remove(tag) {
window.localStorage.removeItem(tag);
}
console.log(arr);