フォームに画像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>