how to show delete button in right corner of Image

Question

I have file input where after selecting image file a image preview is shown, Here is the jquery code

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80"> 

The above codes generate image preview instantly after selecting an image but how can i show delete button in the top right corner of image and reset the file input and remove that image

here is what I've tried to show delete button at top right corner of image

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:https://www.example.com/c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output">
</div>

CSS

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;

}

Now how can i generate button and place it in the right corner because loadFile function only generate image preview

Answer 1

There is 2 mistakes in your code:

1- you didn't close correctly your button so the right markup should be:

<input type="file" name="image_file" id="cretor" accept="image/*"onchange="loadFile(event)">


<div class="img-wrap">
<button id="clear" class="hide" onclick="twz()">x</button>
<img id="output" width="80" height="80"> 

2- The second is that in your css you try to select a class named close , but the markup has a id="clear" so you can change your css in this way and it will work fine:

.img-wrap {
position: relative;
float:left;
}

 .img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;

}

 .hide{
  display:none;
 }

You can show the button only when the image is choosen removing the class hide from the button. Your script becomes:

<script>
 var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$("#clear").removeClass("hide");
};
</script>