How to remove image from input file upload with js?

Question

I am working on image uploader for my website, for now everything is working fine. What I'm trying to do is remove the image from the input file after adding it. The Js code I'm trying doesn't remove the image so I can't figure out what I'm doing wrong. Anyone help me with this?

I appreciate any help and thank you for any replies.

The main problem is that the delete file button does not delete the image, this button appears only after adding the image.

UPDATE SOLUTION

I added a simple key with a function that removes values, now it's working.

<button onclick="remove()">Remove</button>

function remove(){
  $("#preview_avatar").removeAttr("src");
  $("#file-name").text("Seleziona File");
}

ORIGINAL CODE

// SHOW FILE NAME INSIDE FIELD
$("#file").change(function(){
  $("#file-name").text(this.files[0].name);
});

// PREVIEW IMAGE UPLOAD FILE
  function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#preview_avatar').attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}


// HIDE ELEMENT WHEN INPUT IS NOT EMPTY
  $(function () {
  $("input:file").change(function () {
    var fileName = $(this).val();
    if (fileName != "") {
      $(".show_hide").hide();
    } else {
      $("show_hide").show();
    }
  });
});

// REMOVE IMAGE FOR FILE UPLOAD
$(document).ready(function() {
  de();

  $("#file").on("change", function() {

    if ($("#file").val() != "") {
      $("input[type=button]").attr("style", "display:block");
    } else {
      de();
    }
  });

  $("input[type=button]").click(function() {
    $("#file").val('');
    de();
  })

})

function de() {
  $("input[type=button]").attr("style", "display:none");
}
                   

/******************
* Input Field Style
******************/
#preview_avatar {
  display: block;
  width: 96px;
}

select, input[type=text], input[type=number], input[type=password], input.field-settings  {
    width: 100%;
  border-radius: 4px!important;
  border: 2px solid #efefef!important;
  padding: 12px!important;
    margin-bottom: 0px!important;
  line-height: 0.8em!important;
  height: 40px;
}


div.field-settings.upload {
  width: 100%;
  border-radius: 4px!important;
  border: 2px dashed #e3e3e3!important;
  margin-bottom: 0px!important;
  line-height: 0.8em!important;
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

select:focus, input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input.field-settings:focus {
  border: 2px solid #6FA4F2!important;
}

input.field-settings.disabled {
    background: var(--e-global-color-2606bfd);
  color: var(--e-global-color-43596cc);
}

/* Disable first option select from display name */
.field-settings > option:first-child {
  display: none;
}

.chose_file_button {
  height: 100%;
  margin-left: 0px;
  margin-right: 0px;
  transition: all 0.2s;
  border-radius: 4px 0px 0px 4px;
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #f5f5f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="field-settings upload">
  <label for="file" class="chose_file_button">
    <img id="preview_avatar" />
    <label id="file-name" for="file" class="chose_file_input">Dropzone</label>
    <div class="show_hide">Hello, hide this when input is not empty</div>
  </label>
</div>
          
<input id="file" type="file" style="display:none;" class="field-settings avatar" name="image" accept="image/x-png,image/gif,image/jpeg" onchange="readURL(this);">
<span class="description">File accepted: png / gif / jpeg, Max Size 1MB.</span>
<input type="button" value="delete FIle" />