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 small mistakes in your code:

1- you didn't close correct your button so the right markup could 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 works 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 choose adding this in your script

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

how to show delete button in right corner of Image

Sign up