javascript – 如何删除elem和下一个弹出窗口？

我已经将文件上传到我的 Linux服务器并返回了一个标签
(文件div中的名称大小删除成功.

这是我的ajaxSubmit代码：

$("#myupload").ajaxSubmit({
        ......
        success: function(data) {
            files.html(files.html()+"<br />"+"<b class='dataname' >"+data.name+"("+data.size+"k)</b> <span class='delimg' name='"+data.name+"("+data.size+"k)' rel='"+data.pic+"'>delete</span>");
            ......          
        },......
        }
    });

例如,在1.jpg,2.jpg,3jpg上传到服务器后,网站的文件div将出现：

1.jpg(10.36k) delete
2.jpg(5.36k) delete
3.jpg(6.36k) delete

这是我的div文件代码：

.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}
<div class="files"></div>

当我删除2.jpg时,这是我的删除js代码：

$(document).on('click',".delimg",function(){
    var pic = $(this).attr("rel");
    $(this).prev('.dataname').remove(); // removes the filename
    $(this).remove(); // Removes the "delete"
    $.post("action.PHP?act=delimg",{imagename:pic},function(msg){
        if(msg==1){
            //files.html(files.html().replace(new RegExp(filename,"g"),""));
            alert("delete success");
        }else{
            alert(msg);
        }
    });
});

文件div显示如下内容：

1.jpg(10.36k) delete

3.jpg(6.36k) delete

我想删除它们之间的空行,所以我试过了

files.html(files.html().replace(new RegExp(filename,""));

但是文件div看起来不像这样：

1.jpg(10.36k) delete
3.jpg(6.36k) delete

我的html结构是：

<tr>
    <td>M</td>
    <td style="width:30%" >
            <div class="btn">
            <span>addFile</span>
            <input id="fileupload" type="file" name="mypic">
            </div>
            <div class="files"></div>
        </td>
    </tr>

谁能帮我？我曾尝试过替换和删除方法,但未能删除空白.

解决方法

你有一个空的div

height:10px;
margin:10px 0;

你在CSS中声明的.
您可以尝试从DOM中删除元素：

// try to hit node with .files class,I don't kNow you html structure
$(this).parentNode.parentNode.removeChild($(this).parentNode);

或者您可以更改样式,例如,您可以添加类来隐藏已删除的元素：

CSS：

.is-hidden {
    display: none;
}

JavaScript的：

//The same,try to find node with .files class
$(this).parentNode.classList.add('is-hidden');