Javascript 为什么每次用户删除上传的图像预览时，我的HTML页面都会刷新？

我有下面的代码上传图像预览。一旦上传了默认图像以外的图像，就会出现删除按钮。当我点击这个按钮删除图像预览时，页面被刷新，所有用户输入都被删除。我不知道哪里出了问题，也不知道该去哪里寻找。我错过了什么

<div class="row fileinput-control">
  <img id="preview"  
       src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
  <br/>
  <input type="file" id="image" style="display: none;" />
  <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->


  <a href="javascript:changeProfile()">
    <div class="file-btns">
      <span class="btn btn-default btn-file" id="bildChoose">
        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i>
      </span>
    </div>
  </a>        
  <a id="removeBttnFrame" href="javascript:removeImage()"></a>
  <div class="col-sm-6">
    <textarea class="form-control copyright" 
              placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
    Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden."
              name="offer[photo_copyright]" 
              id="offer_photo_copyright"></textarea>
    <div class="fileinput-description"></div>
  </div>
</div>


function changeProfile() {
  $('#image').click();
}

$('#image').change(function () {
  var imgPath = this.value;
  var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg") {
    readURL(this);
  } else {
    alert("Please select image file (jpg, jpeg, png).")
  }
});

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

function removeImage() {
  $('#preview').attr('src', 'noimage.jpg');
  // $("#remove").val(1);
  $('#preview').attr('src', 'Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png');
}

function    addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'

    removeBttn.className="removeBttnClass";

    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

函数changeProfile（）{
$（“#图像”）。单击（）；
}
$（'#image'）。更改（函数（）{
var imgPath=this.value；
var ext=imgPath.substring（imgPath.lastIndexOf（'.'）+1.toLowerCase（）；
如果（ext==“gif”| | ext==“png”| | ext==“jpg”| | ext==“jpeg”）{
readURL（this）；
}否则{
警报（“请选择图像文件（jpg、jpeg、png）。”
}
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.readAsDataURL（input.files[0]）；
reader.onload=函数（e）{
$（'#preview'）.attr（'src'，e.target.result）；
//$（“#删除”）.val（0）；
};
}
}
函数removeImage（）{
$（'#preview'）.attr（'src'，'noimage.jpg'）；
//$（“#删除”）.val（1）；
$（“#预览”）.attr（'src'，'Anzeige%20erstellen Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b2319931ebd0e745.png'）；
}
函数addDeleteBttn（）{
var removeBttn=document.createElement（“按钮”）；
删除bttn.title=“Entfernen”；
removeBttn.innerHTML=''
removeBttn.className=“removeBttnClass”；
document.getElementById（“removeBttnFrame”）.appendChild（removeBttn）；
}

请检查下面的代码。我没有得到任何错误。页面没有刷新。如果您正在搜索其他内容，请告诉我。我刚刚重命名了按钮以删除X，因为这里没有包含令人敬畏的字体。 我还修改了你的一些代码，因为在每次图像预览中，删除按钮都在增加

 <div class="row fileinput-control">
       <img id="preview"  
          src="https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
       <br/>
       <input type="file" id="image" style="display: block;" />
       <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
       <a href="javascript:changeProfile()">
          <div class="file-btns">
             <span class="btn btn-default btn-file" id="bildChoose">
             <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i>
             </span>
          </div>
       </a>
       <a id="removeBttnFrame" href="javascript:removeImage()"></a>
       <div class="col-sm-6">
          <textarea class="form-control copyright" 
             placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
             Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden."
             name="offer[photo_copyright]" 
             id="offer_photo_copyright"></textarea>
          <div class="fileinput-description"></div>
       </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
       function changeProfile() {
    $('#image').click();
}

$('#image').change(function () {
    var imgPath = this.value;
    var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg") {
        readURL(this);
    } else {
        alert("Please select image file (jpg, jpeg, png).")
    }
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
            // $("#remove").val(0);
            $('.removeBttnClass').remove();
            addDeleteBttn();
        };
    }
}

function removeImage() {
    $('#preview').attr('src', 'noimage.jpg');
    // $("#remove").val(1);
    $('#preview').attr('src', 'https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg');
    $('.removeBttnClass').remove();
}

function addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title = "Entfernen";
    removeBttn.innerHTML = 'Remove X'
    removeBttn.className = "removeBttnClass";
    document.getElementById("removeBttnFrame").appendChild(removeBttn);

}
    </script>

函数changeProfile（）{
$（“#图像”）。单击（）；
}
$（'#image'）。更改（函数（）{
var imgPath=this.value；
var ext=imgPath.substring（imgPath.lastIndexOf（'.'）+1.toLowerCase（）；
如果（ext==“gif”| | ext==“png”| | ext==“jpg”| | ext==“jpeg”）{
readURL（this）；
}否则{
警报（“请选择图像文件（jpg、jpeg、png）。”
}
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.readAsDataURL（input.files[0]）；
reader.onload=函数（e）{
$（'#preview'）.attr（'src'，e.target.result）；
//$（“#删除”）.val（0）；
$（'.removeBTTTNClass'）.remove（）；
addDeleteBttn（）；
};
}
}
函数removeImage（）{
$（'#preview'）.attr（'src'，'noimage.jpg'）；
//$（“#删除”）.val（1）；
$（“#预览”）.attr（'src'，'https://img.etimg.com/thumb/msid-68333505，width-643，imgsize-204154，resizemode-4/googlechrome.jpg'）；
$（'.removeBTTTNClass'）.remove（）；
}
函数addDeleteBttn（）{
var removeBttn=document.createElement（“按钮”）；
删除bttn.title=“Entfernen”；
removeBttn.innerHTML='Remove X'
removeBttn.className=“removeBttnClass”；
document.getElementById（“removeBttnFrame”）.appendChild（removeBttn）；
}

共享addDeleteBttn function@armel的代码当我删除imagehmmm时，您的代码没有刷新页面。。。奇怪。我现在在所有浏览器中都试过了，只是为了确定一下。正在刷新所有页面。。。