フォームに画像URLを入力すると画像をプレビューするのと同時に、フォームのテキストとプレビューを消すリセットボタンが表示されるサイトを制作しています。

現状リセットボタンを押すと上記の条件は満たせるのですが、続けてフォームに画像URLを入力すると前の画像も一緒に表示されてしまいます。
入力すればするほど、前の画像、前の画像＋前の前の画像…と、ページを更新するまで一度に表示される画像が増えていきます。

リセットボタンを押すことで、表面上だけでなく中身（？）も一緒に消すか、フォームの入力の際に前の画像を読み込まないようにしたいのですが、どのように修正したらよいでしょうか。

下記サンプルです。
https://jsbin.com/pigusahiwi/edit?html,console,output

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script>
    $(function(){
      $("#selfile2").on("change", function(evt){
        console.log(this.value);
        $("#hide").fadeIn(), $("#bg2").append("<img src='" + this.value + "'>");
      });
      
      $('#reset').click(function () {
        $('#hide').fadeOut();
        //resetすると表面上は消えますが、中身が消えてないためか
        //新しい画像URLを入力しても、前の画像が残ってしまいます。
        var obj = document.getElementById('selfile2');
        obj.value = "";
    });  
    });
  </script>
</head>
<body>
  <input type="text" id="selfile2"><br>
  <div id="hide">
    <div id="bg2"></div>
    <button id="reset">reset</butoon>
  </div>
</body>
</html>