刪除評論留下空白

我目前正在研究一個創意白板，但似乎每當我嘗試刪除評論時，這些創意之間都留有空白。刪除評論留下空白

舉例來說，如果我有以下幾點意見：

enter image description here

但是當我刪除的東西：

enter image description here

我將如何讓這個沒有間隙之間留註釋？

這是到目前爲止我的代碼：

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>

來源

2013-07-24 methuselah

你是否在該行末尾有一個'
'（即在每個''之後）？ –

http://jsfiddle.net/bozdoz/GYpdH/ –

而不是使用<br> s到分開的想法的，只需添加一個CSS規則，使每一個想法是在自己的線上

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

然後

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

成爲

你過濾data後希望以防止XSS。

來源

2013-07-24 21:55:18

完美的工作，謝謝！ – methuselah

我相信你應該使用，而不是 '空' '刪除'。

空不移除元素，它只是清空它。

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

來源

2013-07-24 21:44:30 Whistletoe

試過了，它也是一樣的。 – methuselah

這很奇怪。從鏈接：「使用.remove（）當你想刪除元素本身，以及它裏面的一切。除了元素本身，所有與元素相關聯的綁定事件和jQuery數據將被刪除。「 – Whistletoe

有沒有封閉，你實際上參考'.remove'？註釋你能張貼依然是刪除後的HTML另一個結構元素？ –

我猜它的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>');

以下變化一些線這樣的：

，並在上面添加此：

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

來源

2013-07-24 21:54:50 chrisweb

刪除評論留下空白

回答

相關問題