в последнем примере от
Рони заменила 2 момента (см. комменты). Код добавления новых элементов Ваш.
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset="utf-8" />
<title>ToDoList</title>
<style>
.data{
width: 70%;
height: 50%;
margin-top: -2%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
background: #eee;
font-size: 18px;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>ToDoList</h1>
</div>
<div class="string">
<input type="text" placeholder="Type your task..." id="toDoEl" >
</div>
<ul id="list">
</ul>
<button id="remove" class="remove">
Clear list
</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var input = document.createElement("input"),
title = ["Edit", "Ok"],
list = document.querySelector("#list"),//#list вместо .list
edit = 0,
li;
function replaceNode(elem) {
var first = elem.firstChild,
button = elem.querySelector("button");
edit ^= 1;
edit ? input.value = first.data : input.data = first.value;
input = elem.replaceChild(input, first);
button.textContent = title[edit];
edit ? elem.firstChild.focus() : li = void 0
}
list.addEventListener("click", function(event) {
var target = event.target,
parent = target.parentNode;
if (target.closest(".edit")) {
if (li && li != parent) replaceNode(li);
li = parent;
replaceNode(li)
}
//.close, вместо .del
if (target.closest(".close")) {
if (li && li == parent) replaceNode(li);
list.removeChild(parent)
}
})
document.getElementById("remove").addEventListener("click", function() {
[].forEach.call(document.querySelectorAll("#list li"),function(elem){
list.removeChild(elem)
});
})
function newElement() {
var li = document.createElement('li');
var inputValue = document.getElementById('toDoEl').value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
var reg = /^([\.\?\!\-\_\s\d]{0,}[a-zа-я]{1,})$/gim
if(reg.test(inputValue) === false) {
alert("Type your task!");
} else {
document.getElementById('list').appendChild(li);
}
document.getElementById('toDoEl').value = "";
var span = document.createElement('span');
var txt = document.createTextNode("X");
span.className = "close";
span.appendChild(txt);
var button = document.createElement('button');
var name = document.createTextNode('Edit');
button.className = 'edit';
button.appendChild(name);
li.appendChild(button);
li.appendChild(span);
}
var text = document.getElementById("toDoEl");
text.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) newElement();
});
var remove = function(){
var liel = document.getElementById('list');
if (document.querySelector('li') === null){
alert('The List is empty');
} else {
while (liel.firstChild) {
liel.removeChild(liel.firstChild);
}
}
}
});
</script>
</body>
</html>
