Title: 
Title Source: link
Train of thought:
- Optimize DOM binding events with time delegation mechanism, instead of binding events for each new li.
- Note that after deleting nodes on the DOM, you also need to delete them synchronously in the data.
- Fuzzy matching uses the match method of regular objects and strings.
- The onkeyup attribute is triggered when the user (on the keyboard) releases the key. Relative to the event sequence of the onkeyup event: onkeydown onkeypress onkeyup. onkey is the event after the keyboard accepts the character, which is different from onkeypress.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The last question at the front of the headline</title>
<style>
.main-header {
text-align: center;
}
h1 {
font-size: 100px;
color: rgba(175, 47, 47, 0.4);
font-weight: 100;
margin: 20px;
}
.real-app {
width:600px;
margin: 0 auto;
box-shadow: 0 0 5px #666;
}
.add-input {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
font-smoothing: antialiased;
padding: 16px 16px 16px 60px;
border: none;
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
li {
margin: 4px 0;
color: rgba(175, 47, 47, 0.8);
list-style: none;
padding-left: 18px;
}
.close{
width: 20px;
height: 20px;
float:right;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 20px;
position: relative;
bottom: 3px;
right:4px;
}
</style>
</head>
<body>
<div class="main-header">
<h1>todos</h1>
</div>
<div class="real-app">
<input type="text" class="add-input" placeholder="Please enter here">
<ul id="parent">
</ul>
</div>
</body>
<script>
var arr = [];
var button = "<div class='close'>X</div>";
// var button = " X";
var input = document.getElementsByClassName("add-input")[0];
var left = input.offsetLeft;
document.getElementById("parent").addEventListener("click",function(e) {
// e.target is the clicked element! this is the ul captured in the parent element
// If you click the li element
// console.log("success");
if(e.target && e.target.nodeName == "DIV") {
// console.log(this);
// console.log(e.target);
// console.log(e.target.parentNode)
var str = e.target.parentNode.innerHTML.toString();
var k = str.indexOf("<");
str = str.substr(0,k);
// console.log(str);
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
arr.pop(str);
// arr.pop(e.target.parentNode.text)
}
});
//The onkeyup property is triggered when the user releases the key (on the keyboard).
/* Tip: event order relative to onkeyup event:
onkeydown onkeypress onkeyup
onkey It's the event after the keyboard accepts characters, which is different from onkeypress
*/
input.onkeyup = function(e) {
var value = this.value;
console.log(value);
var ul = document.getElementsByTagName('ul')[0];
ul.style.left = left + "px";
ul.style.border = "none";
ul.innerHTML = "";
if(value) {
var reg = new RegExp(value);
for(var i = 0; i <arr.length; i++ ) {
//match method of string type
if(arr[i].match(reg)) {
var li = document.createElement('li');
li.innerHTML = arr[i] + button;
ul.style.border = "1px solid black";
ul.appendChild(li);
}
}
e = e || window.event;
if(e.keyCode == 13) {
var newLi = document.createElement('li');
var newValue = value;
newLi.innerHTML = newValue + button;
ul.appendChild(newLi);
arr.push(newValue);
input.value = "";
}
}
// It's too wasteful to add events to every li according to this method. Each time you add a new carriage return, you need to operate it once. You can use the time delegation mechanism, that is, the above
// var close = document.getElementsByClassName("close");
// for(var i = 0; i < close.length; i++) {
// (function(i){
// close[i].onlick = function(){
// this.parentNode.parentNode.removeChild(this.parentNode);
// }
// })(i);
// }
}
</script>
</html>