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/

Answer 2

听取委托点击内部.delete元素并在发生时删除相应的li ：

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

演示： http ： //jsfiddle.net/1htxLzm2/

Answer 3

您可以将.closest('li')或.parent()与单击的删除元素上下文一起使用以及.remove()来删除它们：

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

工作演示

Answer 4

您可以捕获delete类的单击，并删除其父级。

(function(){

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