0

現在、アイデアのホワイトボードに取り組んでいますが、コメントを削除しようとすると、アイデアの間に空白が残るようです。

たとえば、次のコメントがあるとします。

ここに画像の説明を入力

しかし、何かを削除すると:

ここに画像の説明を入力

コメント間にギャップが残らないようにするにはどうすればよいですか?

これまでの私のコードは次のとおりです。

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

3 に答える 3

2

s を使用してアイデアを区切る代わりに<br>、CSS ルールを追加して、各アイデアが独自の行になるようにします。

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

その後

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

になる

$chat.prepend(data);

dataできれば、 XSS を防ぐためにフィルターをかけた後です。

于 2013-07-24T21:55:18.173 に答える
1

「空」ではなく「削除」を使用する必要があると思います。

Empty は要素を削除しません。空にするだけです。

マニュアル: http://api.jquery.com/remove/

于 2013-07-24T21:44:30.857 に答える
1

私はあなたがこれを行うことによって挿入する、まだ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);
于 2013-07-24T21:54:50.753 に答える