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

时间:2016-02-16 20:59:35

标签: javascript jquery css

我正在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 会随着垃圾信息而变得越来越长。< / p>

谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

这使用jQuery来选择元素然后将其隐藏起来,如果你以后想要它仍然存在。

或者只需使用普通的javascript删除它:

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

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