動(dòng)態(tài)添加和刪除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #top{
                margin-left: 60px;
                margin-top: 60px;
            }
            #top div{
                width: 200px;
                height: 50px;
                color: white;
                font-size: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 50px;
            }
            #top div font{
                position: absolute;
                right: 3px;
                /*將光標(biāo)變成手*/
                cursor: pointer;
            }
            
            #bottom{
                margin-left: 60px;
            }
            #bottom #text{
                display: inline-block;
                width: 200px;
                height: 50px;
                border: none;
                outline: none;
                /*讓光標(biāo)在中間*/
                text-align: center;
                border-bottom: 2px solid lightgrey;
                font-size: 16px;
            }
            #bottom #button{
                display: inline-block;
                width: 100px;
                height: 30px;
                border: none;
                outline: none;
                background-color: coral;
                color: white;
            }
            
            
        </style>
    </head>
    <body>
        <div id="top">
        </div>
        <!--添加默認(rèn)的水果標(biāo)簽-->
        <script type="text/javascript">
                var fruitArray = ['香蕉', '蘋果', '草莓', '火龍果'];
                for(index in fruitArray){
                    fruitName = fruitArray[index];
                    creatFruitNode(fruitName, 'darkgreen')
                }
                //==========刪除水果=============
                function delFruit(){
                    //在這兒，點(diǎn)擊的是哪個(gè)標(biāo)簽this就指向誰
                    this.parentElement.remove()
                    
                }
                //添加節(jié)點(diǎn)
                function creatFruitNode(fruitName, color1){
                    //創(chuàng)建標(biāo)簽
                    var fruitNode = document.createElement('div')
                    fruitNode.innerHTML = fruitName;
                    var fontNode = document.createElement('font');
                    fontNode.innerText = '×';
                    //給點(diǎn)擊事件綁定驅(qū)動(dòng)程序
                    fontNode.onclick = delFruit;
                    fruitNode.appendChild(fontNode);
                    //設(shè)置背景顏色
                    fruitNode.style.backgroundColor = color1
                    //添加標(biāo)簽
                    var topNode = document.getElementById('top')
                    topNode.appendChild(fruitNode)
                }
            </script>
            
        <div id="bottom">
            <input type="text" name="" id="text" value="" />
            <input type="button" name="" id="button" value="確定" onclick="addFruit()"/>
        </div>
        <script type="text/javascript">
            //=========產(chǎn)生隨機(jī)顏色=============
            function randomColor(){
                var num1 = parseInt(Math.random()*255);
                var num2 = parseInt(Math.random()*255);
                var num3 = parseInt(Math.random()*255);
                return 'rgb('+num1+','+num2+','+num3+')';
            }
            
            //==========添加水果==============
            function addFruit(){
                //獲取輸入框中的內(nèi)容
                var inputNode = document.getElementById('text');
                var addName = inputNode.value;
                if(addName.length == 0){
                    alert('輸入的內(nèi)容為空丽已！');
                    return;
                }
                //清空輸入框中的內(nèi)容
                inputNode.value = '';
                //創(chuàng)建標(biāo)簽
                var fruitNode = document.createElement('div');
                fruitNode.innerHTML = addName;
                var fontNode = document.createElement('font');
                fontNode.innerText = '×';
                //給點(diǎn)擊事件綁定驅(qū)動(dòng)程序
                fontNode.onclick = delFruit;
                fruitNode.appendChild(fontNode);
                //創(chuàng)建隨機(jī)顏色
                //'rgb(255, 0, 0)'
                fruitNode.style.backgroundColor = randomColor();
                var topNode = document.getElementById('top');
                topNode.insertBefore(fruitNode, topNode.firstChild);
                
            }
        </script>
        
        
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市灵莲，隨后出現(xiàn)的幾起案子镐侯，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,270評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件拗军，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡蓄喇，警方通過查閱死者的電腦和手機(jī)发侵，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來妆偏，“玉大人刃鳄，你說我怎么就攤上這事∏睿” “怎么了叔锐？”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)见秽。 經(jīng)常有香客問我愉烙，道長(zhǎng)，這世上最難降的妖魔是什么解取？ 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任步责，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘勺择。我一直安慰自己创南，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布省核。 她就那樣靜靜地躺著稿辙，像睡著了一般。 火紅的嫁衣襯著肌膚如雪气忠。 梳的紋絲不亂的頭發(fā)上邻储，一...
    開封第一講書人閱讀 51,718評(píng)論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音旧噪，去河邊找鬼吨娜。 笑死，一個(gè)胖子當(dāng)著我的面吹牛淘钟，可吹牛的內(nèi)容都是我干的宦赠。 我是一名探鬼主播，決...
    沈念sama閱讀 40,442評(píng)論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼米母，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼勾扭！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起铁瞒，我...
    開封第一講書人閱讀 39,345評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤妙色，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后慧耍，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體身辨，經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年芍碧，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了煌珊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡泌豆，死狀恐怖怪瓶，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情践美，我是刑警寧澤洗贰，帶...
    沈念sama閱讀 35,810評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站陨倡，受9級(jí)特大地震影響敛滋，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兴革，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一绎晃、第九天 我趴在偏房一處隱蔽的房頂上張望蜜唾。 院中可真熱鬧，春花似錦庶艾、人聲如沸袁余。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0贊 22
  • 一樁弒父案咱揍，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽颖榜。三九已至，卻和暖如春煤裙，著一層夾襖步出監(jiān)牢的瞬間掩完，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工硼砰， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留且蓬，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓题翰，卻偏偏與公主長(zhǎng)得像恶阴，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子豹障，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容