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

jQueryUI Sortable - Remove a li from the sortable list

本文关键字：排序 删除 li jQueryUI 列表      更新时间：2023-09-26

我需要的是有一个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>


$(".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/

监听内部.delete元素上的委托点击，并在发生这种情况时删除相应的li：

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

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

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

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

工作演示

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

(function(){
    $(document).on('click', '.delete', function(){
        $(this).parent('li').remove();
    }
})();
相关文章：