. . . Don't hang up at the end of the term...
Today, I finished the fourth question. The logic is a little entangled, but fortunately, there are not many problems
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>homework4</title> </head> <body> <!-- /** * * @author: xiaoliu * @type: NO.16-homework4 * @data: 2018-01-19 * @finished: 2018-01-1 * */ --> <ul id="myList"> </ul> <script> var myL = document.getElementById("myList"); var count = 0; function removeNode() { var ipt = document.getElementById("remove"); ipt.parentNode.parentNode.remove(); for (var i = 0; i < myL.getElementsByTagName("li").length; i++) { myL.children[i].children[0].innerHTML = i + 1; } count = myL.getElementsByTagName("li").length; } function appendItem() { var hobby = prompt("Please input your hobbies", "Such as singing, dancing, etc"); var next = document.createElement("li"); var span1 = document.createElement("span"); var span2 = document.createElement("span"); var span3 = document.createElement("span"); span1.innerHTML = ++count; span2.innerHTML = hobby; span3.innerHTML = '<input id="remove" type="button" value="Delete button" onclick="removeNode()"/>'; next.appendChild(span1); next.appendChild(span2); next.appendChild(span3); myL.appendChild(next); } </script> <input type="button" value="Button" onclick="appendItem()"> </body> </html>
In fact, the logic is quite complicated. Maybe my foundation is too poor. Besides, I didn't have time to write notes. It's very hurtful...
I've been struggling for a long time. I can't understand the usage of this remove. It seems that I can delete the value of the DOM node if I don't write it...
In fact, it took a long time to delete the node corresponding to the value. At last, it occurred to me that I could find it according to the DOM object of input itself, which has nothing to do with count.
It's late, I go to bed first, and I still don't have enough principles to do things, just like today's blog, it's delayed after 0 o'clock