如何在项目成功上传后使上传状态div消失



我正在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 -->

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

谢谢!

正如Tasos指出的那样,插件内置了一个函数来帮助解决这个问题。一种方法是:

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

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

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

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

应该可以解决问题,尽管我还没有测试过。

最新更新