javascript - 元素上传成功后，如何让上传状态div消失？

Question

我正在基于 Dmuploader 构建上传体验带有显示所有文件上传状态的 div。这是主 div“ uploader ”的代码，以及正在上传的每个文件的 div"file"。

<div id="uploader">

    <div class="file" id="9414af9ec02b">
        <div class="info">
            <span class="filename" title="ABC.jpg [Size: 7.6 MiB - type: image/jpeg]">#1 - ABC.jpg</span>
            <small>Status: <span class="status uploading success">Upload Complete</span></small>
        </div>
        <div class="bar">
            <div class="progress uploading success" style="width: 100%;"></div>
        </div>
    </div><!-- End 1st file upload status -->
    
    <div class="file" id="6ca2ffc3b9f1">
        <div class="info">
            <span class="filename" title="happy-new-year.jpg [Size: 274.2 KiB - type: image/jpeg]">#2 - happy-new-year.jpg</span>
            <small>Status: <span class="status uploading success">Upload Complete</span></small>
        </div>
        <div class="bar">
            <div class="progress uploading success" style="width: 100%;"></div>
        </div>
    </div><!-- End 2nd file upload status -->

...
    
</div><!-- End Uploader -->

我现在需要的是让每个file div在文件上传成功后自动消失，否则uploader div会越来越长，有垃圾信息。

谢谢!

Answer 1

正如 Tasos 所指出的，插件中有一个内置函数可以帮助解决这个问题。一种方法是:

onUploadSuccess: function(id, data){
  $('#' + id).hide();
}

这使用 jQuery 来选择元素，然后将其隐藏，以防您以后需要它，它仍然存在。

或者简单地用普通的 javascript 删除它:

onUploadSuccess: function(id, data){
  var element = document.getElementById(id);
  element.parentNode.removeChild(element);
}

应该可以解决问题，但我还没有测试过。