title: how to show delete button in right corner of Image
body: <p>I have file input where after selecting image file a image preview is shown, Here is the jquery code</p>
  
  <pre><code>&lt;script&gt;
    var loadFile = function(event) {
      var output = document.getElementById('output');
      output.src = URL.createObjectURL(event.target.files[0]);
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Html code-></p>
  
  <pre><code>&lt;input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)"&gt;
  &lt;img id="output" width="80" height="80"&gt; 
  </code></pre>
  
  <p>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</p>
  
  <p>here is what I've tried to show delete button at top right corner of image</p>
  
  <pre><code>&lt;div class="img-wrap"&gt;
      &lt;button id="clear" onclick="twz()"&gt;x&lt;/a&gt;
      &lt;img src="blob:https://www.example.com/c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.img-wrap {
      position: relative;
  
  }
  .img-wrap .close {
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 100;
  
  }
  </code></pre>
  
  <p>Now how can i generate button and place it in the right corner because loadFile function only generate image preview</p>