[英]jQueryUI Sortable - Remove a li from the sortable list
What i need is the ability to have an X either a text link, or button, I'm to remove an item from the sortable list. 我需要的是能够让X成为文本链接或按钮,我要从可排序列表中删除一个项目。 How do I write a function to do so within this code?
如何在此代码中编写函数来执行此操作?
$(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>
update 更新
Still not working, but it does on JSfiddle...Help? 仍然没有工作,但它确实在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>
update 更新
I have now fixed it with... 我现在用...修复它
//<![CDATA[
window.onload=function(){
however its not working within my jQuery function...help? 但它不能在我的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>
Listen delegated click on inner .delete
elements and remove corresponding li
when that happens: 听取委托点击内部
.delete
元素并在发生时删除相应的li
:
$("#sortable").sortable({
placeholder: "ui-state-musichighlight"
})
.on('click', '.delete', function() {
$(this).closest('li').remove();
});
Demo: http://jsfiddle.net/1htxLzm2/ 演示: http : //jsfiddle.net/1htxLzm2/
You can use .closest('li')
or .parent()
with clicked delete element context along with .remove()
to remove them: 您可以将
.closest('li')
或.parent()
与单击的删除元素上下文一起使用以及.remove()
来删除它们:
$('.delete').click(function(){
$(this).closest('li').remove();
//or
$(this).parent().remove();
});
You can catch the click on delete
class, and remove its parent. 您可以捕获
delete
类的单击,并删除其父级。
(function(){
$(document).on('click', '.delete', function(){
$(this).parent('li').remove();
}
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.