<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position:relative;
                
                
            }
            .btn{
                width: 20px;
                height: 20px;
                background-color: red;
                /*补全代码*/
                /*中心点定位在类为"box"的div元素右上顶点*/
                position:absolute;
                top:-10px;
                right:-10px;
                /*水平垂直居中*/
                text-align: center;
                line-height: 20px;
                 
            }
            
             .hidden {
                display:none;
            }
        </style>
    </head>
    <body>

        <div class='box'>
            <div class='btn'>X</div>
        </div>

        <script type="text/javascript">
            var btn = document.querySelector('.btn');
            var box = document.querySelector('.box');
            btn.onclick = function(){
                // 补全代码
                box.classList.add('hidden');
            }
        </script>
    </body>
</html>