<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function () { var otext = document.getElementById('text1'); var obtn1 = document.getElementsByTagName('input')[1]; var obtn2 = document.getElementsByTagName('input')[2]; var oul = document.getElementById('ul1'); var flag = 1; obtn1.onclick = function () { if(!otext.value) { return ; } var oli = document.createElement('li'); oli.innerHTML = otext.value; if(oul.children[0]) { oul.insertBefore(oli,oul.children[0]); } else { oul.appendChild(oli); } otext.value = ''; for( var i = 0 ;i < oul.children.length; i++) { oul.children[i].onclick = function () { if(flag) { this.mark = '1'; this.style.background = 'yellow'; } else { this.mark = ''; this.style.background = ''; } flag = !flag; } } }; obtn2.onclick = function () { for(var i = 0; i < oul.children.length; i++) { if(oul.children[i].mark) { oul.removeChild(oul.children[i]); i--; } } } }; </script> </head> <body> <input type="text" id="text1"> <input type="button" value="留言"> <input type="button" value="批量删除"> <ul id="ul1"> </ul> </body> </html>