应用-动态删除

作者: Dxes | 来源:发表于2019-12-11 00:08 被阅读0次

应用-动态删除
删除是生活的常态
总结数据结构-1
AngularJs动态添加元素和删除元素
在vue中动态插入/删除外部js文件
angular 动态添加/删除 control
前端JavaScript-动态添加和删除div元素
删除应用
动态添加或删除RecyclerView的头部和底部
Android开机时间系统优化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/tools.js">
            
        </script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            /*==================水果展示====================*/
            #box1{
                margin-left: 50px;
                margin-top: 20px;
            }
            
            .f1{
                width: 250px;
                height: 60px;
                background-color: cadetblue;
                margin-bottom: 2px;
                
                color: white;
                font-size: 20px;
                
                line-height: 60px;
                
                text-align: center;
                
                position: relative;
            }
            
            .f1>font:last-child{
                position: absolute;
                right: 10px;
            }
            
            .close{
                /*将鼠标变成手的样式*/
                cursor: pointer;
            }
            
            /*====================添加水果===================*/
            #box2{
                margin-left: 50px;
                margin-top: 20px;
            }
            
            #input1{
                border: 0;
                outline: 0;
                border-bottom: 1px solid lightgray;
                
                width: 250px;
                height: 30px;
                
                text-align: center;
                font-size: 20px;
            }
            
            #box2>button{
                width: 100px;
                height: 30px;
                
                font-size: 16px;
                color: white;
                
                background-color: orangered;
                
                border: 0;
                outline: 0;
            }
            
            
        </style>
    </head>
    <body>
        <div id="box1">
            <div class="f1">
                <font>苹果</font>
                <font class="close">×</font>
            </div>
            
            <div class="f1">
                <font>香蕉</font>
                <font class="close">×</font>
            </div>
            
            <div class="f1">
                <font>火龙果</font>
                <font class="close">×</font>
            </div>
            
            <div class="f1">
                <font>西瓜</font>
                <font class="close">×</font>
            </div>
            
        </div>
        <div id="box2">
            <input type="" name="" id="input1" value="" />
            <button onclick="addFurit()">确定</button>
        </div>
        
        <script type="text/javascript">
            
            input1_ = document.getElementById('input1')
            box1_ = document.getElementById('box1')
            
            //======1.添加水果=======
            function addFurit(){
                
                var furitName = input1_.value
                
                //没有输入水果名
                if(furitName.length == 0){
                    furitName = prompt('请输入水果名:')
                    
                    if(furitName == null || furitName.length == 0){
                        return
                    }
                }
                
                //添加水果
                var furitBoxNode = document.createElement('div')
                furitBoxNode.className = 'f1'
                furitBoxNode.style.backgroundColor = randowColor(0.5)
                
                var furitNameNode = document.createElement('font')
                furitNameNode.innerText = furitName
                
                var closeNode = document.createElement('font')
                closeNode.innerText = '×'
                closeNode.className = 'close'
                closeNode.onclick = delFurit
                
                furitBoxNode.appendChild(furitNameNode)
                furitBoxNode.appendChild(closeNode)
                
                box1_.insertBefore(furitBoxNode, box1_.firstElementChild)
                
                //清空输入框
                input1_.value = '';
                
            }
            
            //给默认的四个水果添加点击事件
            (function(){
                var closeNodes = document.getElementsByClassName('close')
                for(var closeNode of closeNodes){
                    console.log(closeNode)
                    closeNode.onclick = delFurit
                }
                
            })();
            
            //======2.删除水果=======
            function delFurit(){
                this.parentElement.remove()
            }
            
            
            
            
        </script>
        
    </body>
</html>