javascript - jQueryUI Sortable - 从可排序列表中删除一个 li

Question

我需要的是能够有一个 X 文本链接或按钮，我要从可排序列表中删除一个项目。如何在此代码中编写函数来执行此操作？

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

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

更新

仍然不工作，但它在 JSfiddle 上工作...帮助？

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

更新

我现在用...修复了它

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

但是它在我的 jQuery 函数中不起作用...帮助？

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

Answer 1

$(".delete").click(function(){
$(this).parent().remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Delete me 1<a href="#" class="delete">delete</a></li>
<li>Delete me 2<a href="#" class="delete">delete</a></li>
<li>Delete me 3<a href="#" class="delete">delete</a></li>
<li>Delete me 4<a href="#" class="delete">delete</a></li>
</ul>

http://jsfiddle.net/25sp6txz/