JSFiddle - React, Tailwind, and code Playground

by von

HTML

<span class="content">
    <div class="top_right_corner">click to close</div>
    <img width="150" height="150"/>
</span>
<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">delete</div>
</span>
<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">close this</div>
</span>

<span class="content">
<img width="150" height="150"/>
<div class="top_right_corner">close this</div>
</span>

CSS

.content {
    position: relative;
    float:left;
}
.content .top_right_corner {
    position: absolute;
    bottom:3px;
    right:3px;
}
.top_right_corner{
  border:solid 1px blue;
  cursor:pointer;
}
.content:hover .top_right_corner{
  border:solid 1px red;
}
img{
  border:solid 2px yellow;
}

JavaScript

function init_close_button(){
	var trc=document.getElementsByClassName('top_right_corner');
	for(var i=0;i<trc.length;i++){
		trc[i].onclick=function(e){
			e.target.parentNode.remove();
		}
	}
}

function loadtest(){
var a=document.createElement('div');
a.innerHTML="WindowLoaded";
document.body.appendChild(a);
}
window.onload=function(){
loadtest();
init_close_button();
}