javascript - 删除评论会留下空白

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>s 来分隔想法，只需添加一个 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

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

$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);