css实现关闭按钮X

html

<div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
<span class="my_close"></span>
</div>

 

css

.my_close {
background: rgb(44, 44, 44);
color: rgb(204, 232, 255);
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 18px;
padding: 1px;
top: -10px;
right: -10px;
position: absolute;
}
.my_close::before {
content: "\2716";
}

 

js

jQuery( document ).on("click", ".my_close", function(e){
$(this).parent().css('display', 'none');
});