前端：图片右上角添加删除，动态添加和删除图片

参考

https://blog.csdn.net/youyudexiaowangzi/article/details/80904433

https://www.cnblogs.com/penny/archive/2008/09/01/1281293.html

1.样式

<style>
.img-box{

  display: inline-block;
  border: 1px solid #ececec;
  position: relative;
}
.cover-img{
  /*max-width: 65px;
  min-width: 65px;*/
  width: 65px;
  height: 65px;
  /*height: 65px;*/
}


.image-remove{
  background-color: white;
  font-color: #ececec;
  font-size: 10px;
  width: 10px;
  height: 10px;
  text-align: center;

  border-radius: 100%;
  transform: rotate(45deg);
  cursor:pointer;
  opacity: 0.5;
  top:1px;
  right:1px;
  display: block;
  position: absolute;
}

</style>

2.容器

<div class="" style="height:140px; overflow: scroll;" role="alert" id="has_select">
</div>

3.js

function do_select(image_id){
    var domDiv = document.createElement("div");
    domDiv.setAttribute("class", "img-box")
    domDiv.setAttribute("id", image_id)

    var bigImg = document.createElement("img");
    bigImg.setAttribute("src","https://files.cnblogs.com/files/makexu/gotop.gif");
    bigImg.setAttribute("class", "cover-img")

    var domSpan = document.createElement("span");
    domSpan.setAttribute("class", "image-remove")
    domSpan.setAttribute("onclick", "removeImage('"+image_id+"')")
    domSpan.innerHTML = "+";

    domDiv.appendChild(bigImg)
    domDiv.appendChild(domSpan)

    //alert(bigImg)
    var myDiv = document.getElementById('has_select');
    myDiv.appendChild(domDiv);
    update_num()
}
function update_num(){
    var num = document.getElementById("has_select").getElementsByTagName("div").length;
    $("#num").text("已选表情包"+num )
}
function removeImage(image_id){
    alert(image_id)
    var myDiv = document.getElementById('has_select');
    var domDiv = document.getElementById(image_id);
    myDiv.removeChild(domDiv)
}

4.效果