Javascript jQueryUI可排序-从可排序列表中删除li

我需要的是能够有一个X或者一个文本链接，或者一个按钮，我要从可排序列表中删除一个项目。如何在这段代码中编写函数来实现这一点

$(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-musichighlight"
    });
});

更新

仍然不起作用，但它在JSFIDLE上起作用…帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#sortable").sortable({
 placeholder: "ui-state-musichighlight"
});

$('.delete').click(function(){
   $(this).closest('li').remove();
             //or
   $(this).parent().remove();    
});
 </script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
</style>

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="javascript:void(0)">X1</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X2</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X3</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

$（“#可排序”）。可排序({
占位符：“ui状态音乐灯光”
});
$（'.delete'）。单击（函数（）{
$（this）.最近（'li'）.remove（）；
//或
$（this.parent（）.remove（）；
});
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；光标：move；}
#可排序li span{位置：绝对；左边距：-1.3em；}
#可排序li.fixed{光标：默认值；颜色：#9595；不透明度：0.5；}

更新

我现在已经用

    //<![CDATA[ 
    window.onload=function(){ 

//
但是它不在我的jQuery函数中工作…帮助

jQuery("#sortable").append('<li class="ui-state-musicdefault"><a class="delete" href="javascript:void(0)">X</a>

jQuery（“#sortable”）.append（'

您可以使用
最近（'li'）
或
.parent（）
与单击的删除元素上下文一起使用
.remove（）
来删除它们：

$('.delete').click(function(){
   $(this).closest('li').remove();
             //or
   $(this).parent().remove();    
});

单击内部
。删除
元素并删除相应的
li
：

$("#sortable").sortable({
    placeholder: "ui-state-musichighlight"
})
.on('click', '.delete', function() {
    $(this).closest('li').remove();
});

演示：
您可以点击
删除
类，并删除其父类

(function(){

    $(document).on('click', '.delete', function(){
        $(this).parent('li').remove();
    }
})();


$（“.delete”）。单击（函数（）{
$（this.parent（）.remove（）；
})；


删除我1
删除我2
删除我3
删除我4
谢谢，这在JSFIDLE上很漂亮，唯一的问题是，如果我使用#或javascript:void（0），我不会在其下降的地方获得相同的输出对于href，我仍然一无所获，即使根据上面的更新，代码是最小的。你能分享小提琴吗？当我将模式更改为无换行符正文时，它可以工作，但其他人不行，我如何使我的代码功能变为“无换行符正文”