Уважаемые коллеги!
Помогите, плиз, с решением задачи. Есть простое приложение "список дел". Мне необходимо сделать так, чтобы при добавлении нового элемента в список, DOM каждый раз перерисовывался и на страницу выводился текущий список задач из массива, а не хранился бы в HTML, а также чтобы удалять элементы. Гуглил, но везде в основном реализация через HTML, т.е. удаление просто симулируется за счет стилей: display: none
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JS - ToDoList</title>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="listName">
<hr>
<h1 id="shopListName">Shopping List</h1>
<p id="getItDone">Get it done today</p>
<hr>
</div>
<div id="listBody">
<!-- It is better to put <INPUT> and BUTTON within a <FORM>-->
<form onsubmit="createListElement(event)">
<input id="userinput" type="text" placeholder="enter items">
<!-- It is possible to add ONCLICK to a <BUTTON> and the event is transferred in the Argument-->
<!-- Button type submit. Works within <FORM> only. And then the whole <FORM> shall be submitted (ONSUBMIT)-->
<button id="enter" type="submit">Add item</button>
</form>
<ul>
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Вот js код:
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var array = [];
function inputLength() {
return input.value.length;
}
function createListElement(event) {
event.preventDefault();
let inputValue = event.target[0].value;
if (!inputValue) {
console.log("empty field");
return;
};
let obj = {
value: inputValue,
isDone: false,
id: array.length
}
array.push(obj);
console.log(event);
console.log(array);
renderDom();
}
function renderDom() {
for (i=0; i<array.length; i++) {
var btnDel = document.createElement("button");
var li = document.createElement("li");
ul.appendChild(li);
li.appendChild(document.createTextNode(input.value));
btnDel.appendChild(document.createTextNode("X"));
li.appendChild(btnDel);
btnDel.addEventListener("click", deleteElement);
var setAttr = array[i].id;
btnDel.setAttribute("id", setAttr);
};
input.value = "";
};
function deleteElement(event) {
// create a delete button
let btnId = event.target.id;
if (btnId == )
console.log(btnId);
}
Заранее благодарен за помощь!