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();    
});

<强>

<强> Working Demo

Answer 4

您可以点击delete班级上的点击，然后删除其父级。

(function(){

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

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

4 个答案:

<强> Working Demo