7115


項目の削除を行いたいのですが、  
どのように実装したら良いか分かりません。  
具体的には、アップロードした各ファイル名の右に削除ボタンを設け、ボタンを押下するとその項目が削除されるようにしたいです。

[code]

    /*
    filedrag.js - HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    (function() {
    
     // getElementById
     function $id(id) {
      return document.getElementById(id);
     }
    
    
     // output information
     function Output(msg) {
      var m = $id("messages");
      m.innerHTML = msg + m.innerHTML;
     }
    
    
     // file drag hover
     function FileDragHover(e) {
      e.stopPropagation();
      e.preventDefault();
      e.target.className = (e.type == "dragover" ? "hover" : "");
     }
    
    
     // file selection
     function FileSelectHandler(e) {
    
      // cancel event and hover styling
      FileDragHover(e);
    
      // fetch FileList object
      var files = e.target.files || e.dataTransfer.files;
    
      // process all File objects
      for (var i = 0, f; f = files[i]; i++) {
       ParseFile(f);
      }
    
     }
    
    
     // output file information
     function ParseFile(file) {
    
      Output(
       "<p>File information: <strong>" + file.name +
       "</strong> type: <strong>" + file.type +
       "</strong> size: <strong>" + file.size +
       "</strong> bytes</p>"
      );
    
     }
    
    
     // initialize
     function Init() {
    
      var fileselect = $id("fileselect"),
       filedrag = $id("filedrag"),
       submitbutton = $id("submitbutton");
    
      // file select
      fileselect.addEventListener("change", FileSelectHandler, false);
    
      // is XHR2 available?
      var xhr = new XMLHttpRequest();
      if (xhr.upload) {
    
       // file drop
       filedrag.addEventListener("dragover", FileDragHover, false);
       filedrag.addEventListener("dragleave", FileDragHover, false);
       filedrag.addEventListener("drop", FileSelectHandler, false);
       filedrag.style.display = "block";
    
       // remove submit button
       submitbutton.style.display = "none";
      }
    
     }
    
     // call initialization file
     if (window.File && window.FileList && window.FileReader) {
      Init();
     }
    
    
    })();
[/code]

[code]

    /*
    Styles for HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    body
    {
     font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
     font-size: 90%;
     margin: 10px;
     color: #333;
     background-color: #fff;
    }
    
    #filedrag
    {
     display: none;
     font-weight: bold;
     text-align: center;
     padding: 1em 0;
     margin: 1em 0;
     color: #555;
     border: 2px dashed #555;
     border-radius: 7px;
     cursor: default;
    }
    
    #filedrag.hover
    {
     color: #f00;
     border-color: #f00;
     border-style: solid;
     box-shadow: inset 0 3px 4px #888;
    }
    
    img
    {
     max-width: 100%;
    }
    
    pre
    {
     width: 95%;
     height: 8em;
     font-family: monospace;
     font-size: 0.9em;
     padding: 1px 2px;
     margin: 0 0 1em auto;
     border: 1px inset #666;
     background-color: #eee;
     overflow: auto;
    }
    
    #messages
    {
     padding: 0 10px;
     margin: 1em 0;
     border: 1px solid #999;
    }
    
    #progress p
    {
     display: block;
     width: 240px;
     padding: 2px 5px;
     margin: 2px 0;
     border: 1px inset #446;
     border-radius: 5px;
     background: #eee url("progress.png") 100% 0 repeat-y;
    }
    
    #progress p.success
    {
     background: #0c0 none 0 0 no-repeat;
    }
    
    #progress p.failed
    {
     background: #c00 none 0 0 no-repeat;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>HTML5 File Drag &amp; Drop API</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
    </head>
    <body>
    <form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
    
    <fieldset>
    <legend>HTML File Upload</legend>
    
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
    
    <div>
     <label for="fileselect">Files to upload:</label>
     <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
     <div id="filedrag">or drop files here</div>
    </div>
    
    <div id="submitbutton">
     <button type="submit">Upload Files</button>
    </div>
    
    </fieldset>
    
    </form>
    
    <div id="messages">
    <p>Status Messages</p>
    </div>
    
    
    <script src="filedrag.js"></script>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2015-02-26T02:00:22.237
7104
2015-02-26T05:03:34.743
2015-02-26T04:31:17.193
7626
7626
question
javascript html5
Status Messagesに表示した項目の削除を行いたい


ここのサンプルコードのようですね。

[How to Use HTML5 File Drag and Drop](http://www.sitepoint.com/html5-file-
drag-and-drop/)

上のコードでファイル情報を生成しているのは `ParseFile()` ですが、HTMLを生成して `innerHTML`
に追加しているので、個別にイベントハンドラを設定するのは少々面倒です。

なので、 `onclick="this.parentElement.remove()"` なボタンを `<p>` の中に入れるのが最短ではないでしょうか。

[code]

    /*
    filedrag.js - HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    (function() {
    
     // getElementById
     function $id(id) {
      return document.getElementById(id);
     }
    
    
     // output information
     function Output(msg) {
      var m = $id("messages");
      m.innerHTML = msg + m.innerHTML;
     }
    
    
     // file drag hover
     function FileDragHover(e) {
      e.stopPropagation();
      e.preventDefault();
      e.target.className = (e.type == "dragover" ? "hover" : "");
     }
    
    
     // file selection
     function FileSelectHandler(e) {
    
      // cancel event and hover styling
      FileDragHover(e);
    
      // fetch FileList object
      var files = e.target.files || e.dataTransfer.files;
    
      // process all File objects
      for (var i = 0, f; f = files[i]; i++) {
       ParseFile(f);
      }
    
     }
    
    
     // output file information
     function ParseFile(file) {
    
      Output(
       "<p>File information: <strong>" + file.name +
       "</strong> type: <strong>" + file.type +
       "</strong> size: <strong>" + file.size +
       "</strong> bytes" +
       '<input type="button" onclick="this.parentElement.remove()" value="削除" />' +
       "</p>"
      );
    
     }
    
    
     // initialize
     function Init() {
    
      var fileselect = $id("fileselect"),
       filedrag = $id("filedrag"),
       submitbutton = $id("submitbutton");
    
      // file select
      fileselect.addEventListener("change", FileSelectHandler, false);
    
      // is XHR2 available?
      var xhr = new XMLHttpRequest();
      if (xhr.upload) {
    
       // file drop
       filedrag.addEventListener("dragover", FileDragHover, false);
       filedrag.addEventListener("dragleave", FileDragHover, false);
       filedrag.addEventListener("drop", FileSelectHandler, false);
       filedrag.style.display = "block";
    
       // remove submit button
       submitbutton.style.display = "none";
      }
    
     }
    
     // call initialization file
     if (window.File && window.FileList && window.FileReader) {
      Init();
     }
    
    
    })();
[/code]

[code]

    /*
    Styles for HTML5 File Drag & Drop demonstration
    Featured on SitePoint.com
    Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
    */
    body
    {
     font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
     font-size: 90%;
     margin: 10px;
     color: #333;
     background-color: #fff;
    }
    
    #filedrag
    {
     display: none;
     font-weight: bold;
     text-align: center;
     padding: 1em 0;
     margin: 1em 0;
     color: #555;
     border: 2px dashed #555;
     border-radius: 7px;
     cursor: default;
    }
    
    #filedrag.hover
    {
     color: #f00;
     border-color: #f00;
     border-style: solid;
     box-shadow: inset 0 3px 4px #888;
    }
    
    img
    {
     max-width: 100%;
    }
    
    pre
    {
     width: 95%;
     height: 8em;
     font-family: monospace;
     font-size: 0.9em;
     padding: 1px 2px;
     margin: 0 0 1em auto;
     border: 1px inset #666;
     background-color: #eee;
     overflow: auto;
    }
    
    #messages
    {
     padding: 0 10px;
     margin: 1em 0;
     border: 1px solid #999;
    }
    
    #progress p
    {
     display: block;
     width: 240px;
     padding: 2px 5px;
     margin: 2px 0;
     border: 1px inset #446;
     border-radius: 5px;
     background: #eee url("progress.png") 100% 0 repeat-y;
    }
    
    #progress p.success
    {
     background: #0c0 none 0 0 no-repeat;
    }
    
    #progress p.failed
    {
     background: #c00 none 0 0 no-repeat;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>HTML5 File Drag &amp; Drop API</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
    </head>
    <body>
    <form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
    
    <fieldset>
    <legend>HTML File Upload</legend>
    
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
    
    <div>
     <label for="fileselect">Files to upload:</label>
     <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
     <div id="filedrag">or drop files here</div>
    </div>
    
    <div id="submitbutton">
     <button type="submit">Upload Files</button>
    </div>
    
    </fieldset>
    
    </form>
    
    <div id="messages">
    <p>Status Messages</p>
    </div>
    
    
    <script src="filedrag.js"></script>
    </body>
    </html>
[/code]

ただ個人的には文字列操作でHTMLを生成するよりjQueryで要素を生成して、そこにイベントも設定するのが好みではあります。

[code]

    var elem = $('<p>');
    // elemに諸々セット
    var btn = $('<button>').appendTo(elem);
    btn.on('click', function(){ ... });
    elem.appendTo('#messages');
    
[/code]

みたいな感じで。


CC BY-SA 3.0
2015-02-26T05:03:34.743
7115
2015-02-26T05:03:34.743
8000
7104
answer