js实现添加、删除ul行

深碍√TFBOYSˉ_ 2022-06-17 10:56 266阅读 0赞

![效果图][SouthEast]  
HTML代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>任务一</title>
        <link rel="stylesheet" href="main.css">
    
    </head>
    <body>
    <p id="top">支付宝信息</p>
    <input id="inputInfo" type="text" />
    <button id="btn">+</button>
    <p id="bottom">已添加的支付宝</p>
    <div id="detail"></div>
    
    <script type="text/javascript" src="basic.js"></script> 
    </body>
    </html>

CSS代码

body, p, ul, li{ margin: 0; padding: 0; }
    
    #top{ font-size: 14px; color: #999; margin: 10px; }
    
    #bottom{ font-size: 14px; color: #000; margin-left: 10px; }
    
    #inputInfo{ width: 260px; height: 38px; font-size: 16px; margin-left: 10px; border: 1px solid #ccc; border-radius: 6px; }
    
    #btn{ width: 50px; height: 36px; border: 1px solid #888; border-radius: 6px; background: none; }
    
    #btn:focus{ outline: none; }
    
    #detail{ width: 360px; margin-left: 10px; }
    #detail li{ width:118px; height: 24px; border: 1px solid #ccc; float: left; list-style: none; }
    #detail .del{ text-align: right; }
    #detail .deleteBtn{ border: none; background: none; }
    #detail .deleteBtn:focus{ outline: none; }

Js代码

[SouthEast]: /images/20220617/f87e3fac89204ba99fad678a4c1ab4d9.png