删除评论会留下空白

Question

我目前正在制作一个想法白板，但似乎每当我尝试删除注释时，这些想法之间都留有空格。

例如，如果我有以下评论：

但是当我删除某些内容时：

我如何才能使评论之间没有间隙？

到目前为止，这是我的代码：

jQuery(function ($) {

    $('#chat').on('click', '.delete', function(e) {
        $(this).parent().remove();
    });

    var socket = io.connect();
    var $messageForm = $('#sendmessage');
    var $messageTitle = $('#title');
    var $messageBox = $('#message');
    var $chat = $('#chat');

    $messageForm.click(function (e) {
        if ($.trim($("#title").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        }
        if ($.trim($("#message").val()).length === 0) {
            alert('You must provide valid input');
            $messageTitle.val('');
            $messageBox.val('');
            return false;
        } else {
            e.preventDefault();
            socket.emit('send message', '<span class="idea"><b>' + $messageTitle.val() + '</b>' + '&nbsp;-&nbsp;' + $messageBox.val() + '&nbsp;' + '[' + '<a class="delete" href="#">Delete</a>' + ']</span>');
            $messageTitle.val('');
            $messageBox.val('');
        }
    });

    socket.on('new message', function (data) {
        $chat.prepend(data + "<br/>");
    });
});

剩下的HTML：

<div id="chat"><span class="idea"><b>sfdf</b>&nbsp;-&nbsp;czxczxc&nbsp;[<a class="delete" href="#">Delete</a>]</span>
    <br><span class="idea"><b>dsdfsd</b>&nbsp;-&nbsp;sdfsdfsdf&nbsp;[<a class="delete" href="#">Delete</a>]</span>
    <br>
    <br><span class="idea"><b>dsfsdf</b>&nbsp;-&nbsp;sdfsdf&nbsp;[<a class="delete" href="#">Delete</a>]</span>
    <br>
</div>

Answer 1

而不是使用<br>来分隔想法，只需添加一个CSS规则，以便每个想法都在自己的行上

<style>span.idea { display: block }</style>

然后

$chat.prepend(data + "<br/>");

变为

$chat.prepend(data);

希望在您过滤data后阻止XSS。

Answer 2

我相信你应该使用'删除'而不是'空'。

Empty不会删除该元素，只会将其清空。

手册： http://api.jquery.com/remove/

Answer 3

我猜它仍然在dom中的br，你通过这样做插入：

$chat.prepend(data + "<br/>");

也许你改变了代码，以便它使用一个列表，如下所示：

<ul>
    <li class="id">message1</li>
    <li class="id">message2</li>
</ul>

你必须编辑改变这些行：

socket.emit('send message', '<li class="idea"><b>' + $messageTitle.val() + '</b>' + '&nbsp;-&nbsp;' + $messageBox.val() + '&nbsp;' + '[' + '<a class="delete" href="#">Delete</a>' + ']</li>');

以下几行改变了这一点：

$chat.prepend(data);

并在顶部添加：

var chatUlElement = $('ul');
var $chat = $('#chat').append(chatUlElement);