功能1.删除状态
用removeChild()方法即可
功能2.最上面的点赞
判断文字的内容是否为赞，做相应操作改变存放赞数量的容器文本内容
功能3.回复评论
创建一个新的评论添加到评论列表里
功能4.回复里的点赞
判断我是否点了赞，做相应操作
功能5.回复或者删除
判断字符串回复还是删除，做相应操作
代码用了事件代理，还有三元运算判断，减少代码量
每行代码都有详细的注释
一眼看到那么多的代码不要烦躁
其实你要把每个功能单独去看都是很简单的dom操作
一点点消化，读懂每一行代码
完整代码
注：代码复制到本地后替换下图片
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;border:none; outline: none;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover, a:visited, a:link, a:active{text-decoration:none;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clear{clear: both;float: none;height: 0;overflow: hidden;} body{color:#333; font: 12px/1.3 'Arial','Microsoft YaHei';} #pn{width: 550px; height: auto; background: #fff; margin: 0 auto; padding: 20px;} .list0{padding: 20px 0; position: relative; border-top: 1px solid #eee;} .head{width: 60px; float: left;} .head img{width: 60px; height: 60px; } .close{width: 20px; height: 20px; position: absolute; top: 0; right: 0; color: #696e78; font-size: 14px; text-align: center; line-height: 20px;} .close:hover{color: #eb7350;} .content{width: 450px; line-height: 20px; font-size: 14px; margin-left: 70px; } .name{color: #eb7350; } .pic{margin: 5px 0;} .good:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;} .good{*zoom:1;} .date{float:left; color: #808080;} .good a{float: right; color: #808080;} .people{background: #F7F7F7; height: 28px; line-height: 28px; padding-left: 10px; margin: 5px 0;} .comment:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;} .comment{*zoom:1; padding: 10px 0; border-top: 1px solid #eee;} .comment-left{width: 30px; float: left; display: inline; margin-right: 10px;} .comment-left img{width: 30px; height: 30px;} .comment-right{float: left; width: 410px;} .comment-text{line-height: 18px;} .comment-text span{color:#eb7350;} .comment-date{font-size: 12px; line-height: 14px; color: #ccc; position: relative;} .comment-zan{position: absolute; right: 40px; bottom: 0; color: #808080;} .comment-dele{position: absolute; right: 0; bottom: 0; color: #808080;} .hf:after{clear:both;content:'';display:block;width:0;height:0;visibility:hidden;} .hf{*zoom:1;} .hf-text{ border: 1px solid #eee; display: block; height: 15px; width: 438px; padding: 5px; resize: none; color: #ccc; font-size:12px;} .hf-on .hf-text{height: 60px; color: #333; border:1px solid #ff8140;} .hf-btn{float: right; width: 65px; height: 26px; background: #f7f7f7; color: #ccc; font-size: 12px; display: none;} .hf-btn-on{background: #ff8140; color: #fff; } .hf-nub{float: right; padding: 3px 5px; color: #666; display: none;} .hf-on .hf-btn{display: inline;} .hf-on .hf-nub{display: inline;} </style> </head> <body> <ul> <li> <a href="javascript:;">X</a> <div><img src="https://www.jb51.net/images/T1.jpg" alt=""/></div> <div> <p><span>Andy：</span>哈哈哈哈哈谁还没个妈～//@我的朋友是个呆B: 饮水机那个蕾丝罩我给跪了//@八卦_我实在是太CJ了:仿佛看到了自己家</p> <div><img src="https://www.jb51.net/images/img1.jpg" alt=""/></div> <div><span>02-14 23:01</span><a href="javascript:;">赞</a></div> <div total="2980">2980人觉得很赞</div> <div> <div user="self"> <div><img src="https://www.jb51.net/images/T1.jpg" alt=""/></div> <div> <div><span>老王：</span>我住隔壁我姓王</div> <div>02-14 22:00 <a href="javascript:;" total="23" my="1">23 取消赞</a> <a href="javascript:;">回复</a> </div> </div> </div> <div user="self"> <div><img src="https://www.jb51.net/images/T1.jpg" alt=""/></div> <div> <div><span>我：</span>看哭了留卡号吧</div> <div>02-14 24:00 <a href="javascript:;" total="0" my="0">赞</a> <a href="javascript:;">删除</a> </div> </div> </div> </div> <div> <textarea type="text" autocomplete="off" maxlength="100">评论…</textarea> <button>回复</button> <span>0/100</span> </div> </div> </li> <li> <a href="javascript:;">X</a> <div><img src="https://www.jb51.net/images/T2.jpg" alt=""/></div> <div> <p><span>Andy：</span>哈哈哈哈哈谁还没个妈～//@我的朋友是个呆B: 饮水机那个蕾丝罩我给跪了//@八卦_我实在是太CJ了:仿佛看到了自己家</p> <div><img src="https://www.jb51.net/images/img1.jpg" alt=""/></div> <div><span>02-14 23:01</span><a href="javascript:;">赞</a></div> <div total="0"></div> <div> <div user="self"> <div><img src="https://www.jb51.net/images/T2.jpg" alt=""/></div> <div> <div><span>我：</span>看哭了留卡号吧</div> <div>02-14 24:00 <a href="javascript:;" total="286" my="1">286 取消赞</a> <a href="javascript:;">删除</a> </div> </div> </div> </div> <div> <textarea type="text" autocomplete="off" maxlength="100">评论…</textarea> <button>回复</button> <span>0/100</span> </div> </div> </li> </ul> <script type="text/javascript"> //在页面加载完后立即执行多个函数。 function addloadEvent(func){ var oldonload=window.onload; if(typeof window.onload !="function"){ window.onload=func; } else{ window.onload=function(){ if(oldonload){ oldonload(); } func(); } } } addloadEvent(b); function b(){ var pn=document.getElementById("pn"); var lists=pn.children; //删除当前节点 function remove(node){ node.parentNode.removeChild(node); } //上面的点赞 function praisebox(box,el){ //获取赞数量容器 var praise=box.getElementsByClassName("people")[0]; //获取容器当前total值 var total=parseInt(praise.getAttribute("total")); //获取点击的innerHTML var txt=el.innerHTML; //创建一个新的total存储用 var newtotal; //判断点击的文字内容 if(txt=="赞"){ //total值+1 因为我还没点击赞，所以要点击的时候就多了一个人 total+1 newtotal=total+1; //判断赞数量 把相应文字放到赞容器里 praise.innerHTML=newtotal==1 ? "我觉得很赞" : "我和" + total +"个人觉得很赞"; el.innerHTML="取消赞"; } else{ //反之total值-1 newtotal=total-1; praise.innerHTML=newtotal==0 ? "" : newtotal +"个人觉得很赞"; el.innerHTML="赞"; } //更新total值 praise.setAttribute("total",newtotal); //如果没有人点赞容器隐藏 praise.style.display=(newtotal==0) ? "none" : "block"; } //回复评论 function reply(box){ //获取评论框 var textarea=box.getElementsByTagName("textarea")[0]; //获取包含所有评论的容器 var comment=box.getElementsByClassName("comment-list")[0]; //创建新的评论div var div=document.createElement("div"); //赋类名 div.className="comment"; //设置属性 div.setAttribute("user","self"); //获取每条评论的innerHTML结构，每次只替换textarea的输入内容和 当前发送时间 var html='<div>'+'<img src="https://www.jb51.net/images/T2.jpg" alt=""/>'+'</div>'+ '<div>'+ '<div><span>我：</span>'+textarea.value+'</div>'+ '<div>'+ getTime()+ '<a href="javascript:;" total="0" my="0">赞</a>'+ '<a href="javascript:;">删除</a>'+ '</div>'+ '</div>'; //插入到新建的评论div div.innerHTML=html; //把新评论插入到评论列表 comment.appendChild(div); //评论后初始化textarea输入框 textarea.value="评论…"; textarea.parentNode.className="hf"; } //获取当前时间回复评论时调用 function getTime(){ var t=new Date(); var y=t.getFullYear(); var m=t.getMonth()+1; var d=t.getDate(); var h=t.getHours(); var mi=t.getMinutes(); m=m<10?"0"+m:m; d=d<10?"0"+d:d; h=h<10?"0"+h:h; mi=mi<10?"0"+mi:mi; return y+"-"+m+"-"+d+""+h+":"+mi; } //回复里点赞 function praiseReply(el){ //获取当前total值 也就是所有点赞数量 var total=parseInt(el.getAttribute("total")); //获取当前my值 我的点赞 var my=parseInt(el.getAttribute("my")); //创建新的total var newtotal; //判断my=0就是我准备要点赞 if(my==0){ //我点了赞总数量就要+1 newtotal=total+1; //更新total值 el.setAttribute("total",newtotal); //更新my值 el.setAttribute("my",1); //更新文字 就是我点了后 文字就是取消赞了 el.innerHTML=newtotal+" 取消赞"; }else{ //反之-1 newtotal=total-1; el.setAttribute("total",newtotal); el.setAttribute("my",0); el.innerHTML=(newtotal==0)?" 赞":newtotal+" 赞"; } } //操作回复 function operateReply(el){ //每条评论 var comment=el.parentNode.parentNode.parentNode; //整个状态 var box=comment.parentNode.parentNode.parentNode; //评论框 var textarea=box.getElementsByTagName("textarea")[0]; //名字 var user=comment.getElementsByClassName("user")[0]; //点击的innerHTML var txt=el.innerHTML; //判断当前点击的是否为回复 if(txt=="回复"){ //评论框触发焦点事件 也就是变高 textarea.onfocus(); //内容变为回复+当前人的名字 textarea.value="回复 "+user.innerHTML; //调用键盘事件 textarea.onkeyup(); }else{ //否则就是删除节点 remove(comment); } } //遍历所有状态消息 for(var i=0;i<lists.length;i++){ //全部事件代理 lists[i].onclick=function(e){ //获取当前点击事件 var e=e||window.event; var el=e.srcElement; if(!el){ el=e.target;//兼容火狐 } //判断点击的类名 switch(el.className){ //关闭整个状态 case "close": remove(el.parentNode); break; //上面的点赞 case "dzan": praisebox(el.parentNode.parentNode.parentNode,el); break; //回复评论 case "hf-btn hf-btn-on": reply(el.parentNode.parentNode.parentNode); break; //每条评论中点赞 case "comment-zan": praiseReply(el); break; case "comment-dele": operateReply(el); break; } } var textarea=lists[i].getElementsByClassName("hf-text")[0]; //焦点事件 textarea.onfocus=function(){ this.parentNode.className='hf hf-on'; this.value = this.value == '评论…' ? '' : this.value; } //失焦事件 textarea.onblur=function(){ if(this.value==''){ this.parentNode.className='hf'; this.value ='评论…'; } } //键盘事件 textarea.onkeyup=function(){ var len=this.value.length; var textParentNode=this.parentNode; var textBtn=textParentNode.children[1]; var textNub=textParentNode.children[2]; if(len==0 /*|| len>100*/){ textBtn.className="hf-btn"; }else{ textBtn.className="hf-btn hf-btn-on"; /*this.style.color="#333"; */ } textNub.innerHTML=len+"/100"; } } //遍历结束 } </script> </body> </html>