<style type="text/css">
.video{
width:100%;
height:500px;
}
#div1{
margin: auto;
border: 1px beige solid;
width: 512px;
text-align: left;
}
ul{
list-style-type: none;
list-style-image: url(../lxyzzy的副本/images/y.JPG);
}
.box{
width: 400px;
height: 150px;
border: 1px darkgray solid;
border-radius: 30px;
position: relative;
}
.box .touxiang{
width: 80px;
height: 80px;
background-size: 100% 100%;
background-image: url(../lxyzzy的副本/images/y.JPG);
position: absolute;
left: 10px;
top: 10px;
}
.box .nicheng{
width: 80px;
height:25px ;
position: absolute;
left: 10px;
top: 100px;
font-size: 12px;
text-align: center;
line-height: 25px;
}
.box .pinglun{
width: 290px;
height: 80px;
position: absolute;
top: 10px;
right: 10px;
}
.box .shijian{
width: 200px;
height: 25px;
position: absolute;
top: 100px;
left:100px;
}
</style>
<script>
window.onload=function(){
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn1");
var oUl1 = document.getElementById("ul1");
oBtn.onclick=function(){
var oBox = document.createElement("div");
oBox.className = "box";
//创建头像
var oDiv = document.createElement("div");
oDiv.className = "touxiang";
oBox.appendChild(oDiv);
var oDiv = document.createElement("div");
oDiv.className = "nicheng";
oDiv.innerHTML = "rich";
oBox.appendChild(oDiv);
var oDiv = document.createElement("div");
oDiv.className = "pinglun";
oDiv.innerHTML = oTxt.value;
oBox.appendChild(oDiv);
var oDiv = document.createElement("div");
oDiv.className = "shijian";
var oDate = new Date();
//oDate.getFullYear
oDiv.innerHTML ="评论时间 "+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+" <a href='javascript:;'>删除</a>";
oBox.appendChild(oDiv);
oUl1.appendChild(oBox);
/*oBox.insertBefore(oUl1,oDiv[0]);*/
var aA = oDiv.getElementsByTagName("a");
for(var i = 0;i<aA.length;i++)
{
aA[i].onclick=function(){
oDiv.removeChild(this.parentNode);
}
}
}
}
</script>
<body>
<div>
<video width="320" height="240" controls class="video">
<source src="video/m.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<br>
<!-- 分界线 -->
<hr>
<h2 align="center"> 评论</h2>
<div id="div1" >
<textarea cols="70" rows="8" id="txt"></textarea><br/>
<input type="button" value="评论" id="btn1" />
<ul id="ul1"></ul>
</div>
</body>
实现不了删除操作是什么原因
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 崽崽的谷雨 2021-12-14 12:24关注
90行写错了 。 需要两个 parentNode。removeChild删除的元素必须是 其子元素(不能嵌套)。
<style type="text/css"> .video{ width:100%; height:500px; } #div1{ margin: auto; border: 1px beige solid; width: 512px; text-align: left; } ul{ list-style-type: none; list-style-image: url(../lxyzzy的副本/images/y.JPG); } .box{ width: 400px; height: 150px; border: 1px darkgray solid; border-radius: 30px; position: relative; } .box .touxiang{ width: 80px; height: 80px; background-size: 100% 100%; background-image: url(../lxyzzy的副本/images/y.JPG); position: absolute; left: 10px; top: 10px; } .box .nicheng{ width: 80px; height:25px ; position: absolute; left: 10px; top: 100px; font-size: 12px; text-align: center; line-height: 25px; } .box .pinglun{ width: 290px; height: 80px; position: absolute; top: 10px; right: 10px; } .box .shijian{ width: 200px; height: 25px; position: absolute; top: 100px; left:100px; } </style> <script> window.onload=function(){ var oTxt = document.getElementById("txt"); var oBtn = document.getElementById("btn1"); var oUl1 = document.getElementById("ul1"); oBtn.onclick=function(){ var oBox = document.createElement("div"); oBox.className = "box"; //创建头像 var oDiv = document.createElement("div"); oDiv.className = "touxiang"; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "nicheng"; oDiv.innerHTML = "rich"; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "pinglun"; oDiv.innerHTML = oTxt.value; oBox.appendChild(oDiv); var oDiv = document.createElement("div"); oDiv.className = "shijian"; var oDate = new Date(); //oDate.getFullYear oDiv.innerHTML ="评论时间 "+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+" <a href='javascript:;'>删除</a>"; oBox.appendChild(oDiv); oUl1.appendChild(oBox); /*oBox.insertBefore(oUl1,oDiv[0]);*/ var aA = oDiv.getElementsByTagName("a"); for(var i = 0;i<aA.length;i++) { aA[i].onclick=function(){ console.log(this.parent) //oUl1.removeChild(oBox); //这个 也可以 oUl1.removeChild(this.parentNode.parentNode); //这个也可以 } } } } </script> <body> <div> <video width="320" height="240" controls class="video"> <source src="video/m.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video> </div> <br> <!-- 分界线 --> <hr> <h2 align="center"> 评论</h2> <div id="div1" > <textarea cols="70" rows="8" id="txt"></textarea><br/> <input type="button" value="评论" id="btn1" /> <ul id="ul1"></ul> </div> </body>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥100 set_link_state
- ¥15 虚幻5 UE美术毛发渲染
- ¥15 CVRP 图论 物流运输优化
- ¥15 Tableau online 嵌入ppt失败
- ¥100 支付宝网页转账系统不识别账号
- ¥15 基于单片机的靶位控制系统
- ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度