Deleting a comment leaves gaps

I'm currently working on an idea whiteboard, but it seems that whenever I try to delete comments, blank spaces are left between the ideas.

For example, if I have the following comments:

enter image description here

But when I delete something:

enter image description here

How would I make it so that no gaps are left between comments?

Here is my code so far:

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/>");
    });
});

The HTML that remains:

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

Instead of using <br>s to separate ideas, just add a CSS rule so that each idea is on its own line

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

and then

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

becomes

$chat.prepend(data);

hopefully after you've filtered data to prevent XSS.

I believe you should use 'remove' instead of 'empty'.

Empty does not remove the element, it just empties it.

Manual: http://api.jquery.com/remove/

i guess its the br that is still in the dom, that you insert by doing this:

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

maybe you change you code so that it uses a list, that would look like this:

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

you would have to edit change these lines:

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

some lines below change this:

$chat.prepend(data);

and on top add this:

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