How to remove pic from placeholder and file from File-Input?

Question

              <div class="row">
                <div class="col s2">
                  <img id="blah" src="img/city.jpg" alt="your image" width="100" height="100"/>
                </div>
                <button class="btn red darken-2 z-depth-0" id="RemovePICs" onclick="clearFileInput()" >X</button>
              </div>
              

              <div class="row">
                <div class= "col s10">
                  <form action="#">
                    <div class="file-field input-field">
                      <div class="btn">
                        <span>Profilbild auswählen</span>
                        <input type="file"  id="imgInp" accept="image/x-png,image/jpeg">
                      </div>
                      <div class="file-path-wrapper">
                        <input class="file-path validate" type="text">
                      </div>
                    </div>
                  </form>
                </div>

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

function clearFileInput() {
}

Hello everyone, I'm creating my own website by using HTML.JS and Materialize-css. I'm also using the File-Input (Materialize-css). If I use the File-Input everything works fine, If I put a pic there. then the pic shows up in the img-placeholder. But now I'm trying to implement a button who removes all (the pic from the placeholder and the file from the file-input), If I click on the X button. everything should look like it did befor: I'm thankful for every help :)

Answer 1

I think as you set $('#blah').attr('src', e.target.result); to image. you need to use same code but set src blank. Try the below snippet.

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); }); function clearFileInput() { $('#blah').attr('src',''); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col s2"> <img id="blah" src="img/city.jpg" alt="your image" width="100" height="100"/> </div> <button class="btn red darken-2 z-depth-0" id="RemovePICs" onclick="clearFileInput()" >X</button> </div> <div class="row"> <div class= "col s10"> <form action="#"> <div class="file-field input-field"> <div class="btn"> <span>Profilbild auswählen</span> <input type="file" id="imgInp" accept="image/x-png,image/jpeg"> </div> <div class="file-path-wrapper"> <input class="file-path validate" type="text"> </div> </div> </form> </div> </div>