Comparing with the pain of eggs, I accompanied my elders to drink in the evening (first to find an excuse), and then at about 1 o'clock I suddenly thought that the programming test of Ali's enrollment had not been written, so I started to dry the code, native js. When you can't use jQuery, it's a miss to call that way in a chain.
The title is very simple, that is, to insert Li into ul, and then have a deleted word, click delete can delete the li, achieve this (write dead method should not work, estimate the test with the relevant js code to write), and then... I didn't write it out, but I continued to write it for an hour. (Well, I don't know why it took so long. I've done similar things before, and I understand the routine.)
First up the code (can run correctly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90px;
}
li .del, .del {
width: 15px;
}
ul {
list-style: none;
}
.user-delete {
cursor: pointer;
}
</style>
</head>
<body>
<div id="J_container">
<div class="record-head">
<div class="head id">Serial number</div><div class="head name">Full name</div><div class="head sex">Gender</div><div class="head tel">Phone number</div><div class="head province">Province</div><div class="head">operation</div>
</div>
<ul id="J_List">
<li><div class="id">1</div><div class="name">Zhang San</div><div class="sex">male</div><div class="tel">13788888888</div><div class="province">Zhejiang</div><div class="user-delete">delete</div></li>
<li><div class="id">2</div><div class="name">Li Si</div><div class="sex">female</div><div class="tel">13788887777</div><div class="province">Sichuan</div><div class="user-delete">delete</div></li>
<li><div class="id">3</div><div class="name">WangTwo</div><div class="sex">male</div><div class="tel">13788889999</div><div class="province">Guangdong</div><div class="user-delete">delete</div></li>
</ul>
</div>
<script>
// It can also be changed to ES6 here.
function Contact(){
this.init();
}
window.onload=function(){
var liInfo=[];
function change(n,all){
var nowSq=0;
for(var i=0;i<n;i++)
{
if(liInfo[i]==1)
{
nowSq++;
}
};
console.log('nowSq'+nowSq);
all[nowSq].parentNode.removeChild(all[nowSq]);
liInfo[n]=0;
for(var i=n+1;i<liInfo.length;i++)
{
if(liInfo[i]==0)continue;
var k=all[nowSq].getElementsByClassName("id")[0];
k.innerHTML-=1;
nowSq++;
}
}
doc = window.document;
var allUl = doc.getElementById("J_List");
var allLi = allUl.getElementsByTagName("li");
var allDel = doc.getElementsByClassName("user-delete");
for (var i =0; i<allDel.length;i++){
liInfo.push(1);
(function(n){
allDel[n].onclick = function(e){
change(n,allLi);
}
})(i);
};
}
// your code here
</script>
</body>
</html>First, the train of thought:
First, we analyze html, where ul nests Li and li, which contains two important things. class id is used to represent sequence, and then a user-delete is used to represent deletion.
After analyzing the processing logic, click Delete and the line li disappears. (Would it be easier to write a hidden, but there is something wrong with this property, or choose Delete Node). Then the id value after this line is reduced by one?
In addition, how to ensure the preparation needed for logical implementation, first of all, we need to register a click listener for deletion, which is used for deletion of one line, so each line must register a listener (that is, deletion of each line to add a listener), and then we need to know which one to click on when clicking (there should be an advanced method, here choose the method of comparison). That is to say, we need to register a listener for deletion of each line. The registered listener has an id to know the number of deletions. The core is this.
But the trouble is that this is equivalent to data structure preparation combined with code. If the logic chooses Li in ul, that is to say, it should be based on the current state of UL (not really should be possible, when it needs to save too much information, similar to hidden), but if UL chooses a li in ul, it will change the real-time state of UL by removing, that is, listening before. The deletion ID of liInfo does not match the real-time Li in ul. Therefore, an array of liInfo is introduced. The representation of tag 1 is not deleted, and tag 0 is deleted. LiInfo is used to communicate the deleted ID with the current ul, which is a mapping relationship. Because of the deletion feature, there is such a mapping: f(ul) ={in [0,id), how many Info [element], marked 1, and then you can relax. Write the code.
Here are some pits:
First, use window.onload=function(){} instead of jQuery, because of loading problems, make sure that the js is loaded after the dom tree is built.
Secondly, the anonymous function mentioned in the previous article has no explicit id in the deletion of registration events, but there is an implicit n for similar purposes. This transfer n has to rely on anonymous functions (because the onclick event handler is equivalent to defining a function and is not executed, if it is not wrapped with anonymous functions, then when it is called Wait, look up the scope chain, and at that time i was all 3!)
Next, there is a series of how to use mapping relations to deal with the details. It is suggested that the best way to start writing is by hand.