Javascript jquery可排序事件

我有两个列表，一个是draggale，另一个是sortable。当我将项目从可拖动移动到可排序时，项目接收span和span X标记。但问题是，当我稍后在sortable item中对项目进行排序时，会再次收到x。然后我有类似于Item1xx的东西，每次你对新的x（或拖动）排序时都会出现

我怎样才能解决这个问题

$(function() {
 $( ".draggable" ).draggable({ 
    helper: "clone", 
    connectToSortable: ".sortable" 
  });
 $(".sortable").sortable({
        stop: function(event, ui) {
            ui.item.html(ui.item.text()+'<span class="remove">X</span>');
        }
 });
});

$（函数（）{
$（“.draggable”）.draggable（{
助手：“克隆”，
connectToSortable:“.sortable”
});
$（“.sortable”）.sortable({
停止：功能（事件、用户界面）{
html（ui.item.text（）+'X'）；
}
});
});

检查项目中是否没有

span。是否删除项目中的

$(function() {
    $( ".draggable" ).draggable({ 
        helper: "clone", 
        connectToSortable: ".sortable" 
    });
    $(".sortable").sortable({
        stop: function(event, ui) {
            if(!ui.item.find('span.remove').length) {
                ui.item.html(ui.item.text()+'<span class="remove">X</span>');
            }
        }
    });
});

$（函数（）{
$（“.draggable”）.draggable（{
助手：“克隆”，
connectToSortable:“.sortable”
});
$（“.sortable”）.sortable({
停止：功能（事件、用户界面）{
if（！ui.item.find（'span.remove'）.length）{
html（ui.item.text（）+'X'）；
}
}
});
});