52987


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

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

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

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

[code]

    <!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>
[/code]


CC BY-SA 4.0
2019-02-22T13:22:20.580
52948
2019-02-24T04:19:09.317
32275
question
javascript html jquery css
画像URL入力フォームの中身をリセットボタンでリセットしたい


ソースは何かを参考にどこかから持ってきたけど、その動作が理解できないので改造できない、といった状態でしょうか。

appendは「付け加える、付加する、付け足す」という意味ですね。  
img要素を動的に（＝JavaScriptで）作成する必要はなくて  
最初からhtmlにimg要素を配置しておいてsrcだけ差し替えるようにすればいいと思います。

本題とは違う部分で指摘したいところは色々ありますが、提示されているソースを最小限の改造で動作させるなら以下のような感じかと思います。

[code]

    <!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);
            $("#img").prop("src", this.value);
            $("#hide").fadeIn();
          });
    
          $('#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">
          <img id="img">
        </div>
        <button id="reset">reset</butoon>
      </div>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2019-02-24T04:19:09.317
52987
2019-02-24T04:19:09.317
4388
52948
answer