Question

我已经将文件上传到我的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,"g"),""));

但文件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>

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

Answer 1

你有一个空的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');

Answer 2

您必须修改删除这些元素的代码，并添加一行以删除</br>：

$(document).on('click',".delimg",function(){
    var pic = $(this).attr("rel");
    $(this).prev("br").remove();
    $(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);
        }
    });
});

修改：closest("br")不起作用。已将其更改为prev("br")

希望这有帮助！

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

2 个答案: