Beata156 2021-12-14 11:54 采纳率: 75%
浏览 28
已结题

实现不了删除操作是什么原因


 
<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 ="评论时间&nbsp;&nbsp;"+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+"&nbsp;&nbsp;<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">&nbsp;&nbsp;评论</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>


img

  • 写回答

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 ="评论时间&nbsp;&nbsp;"+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+"&nbsp;&nbsp;<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">&nbsp;&nbsp;评论</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>
     
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月22日
  • 已采纳回答 12月14日
  • 创建了问题 12月14日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度