How to remove elem and the next popup?

Question

I uploaded the file to my Linux server and returned with a tag similar (name + size + delete in div files successfully.

Here are my ajaxSubmit codes:

$("#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>");
            ......          
        },
        ......
        }
    });

For example, after 1.jpg, 2.jpg, 3jpg have been uploaded to the server, the website div files will appear:

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

Here is my div file code:

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

When I remove 2.jpg, here is my js removal code:

$(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 files are displayed as follows:

1.jpg(10.36k) delete

3.jpg(6.36k) delete

I want to remove the empty line between them, so I tried

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

But div files are not displayed as follows:

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

My html version:

   <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>

Who can help me? I tried to replace and remove the method, but could not remove the empty one.

Answer 1

You have an empty div with

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")

, !