时间戳

首页 > 解决方案 > 删除可拖动部分以在 JQUERY 中进行排序

javascript - 删除可拖动部分以在 JQUERY 中进行排序

问题描述

我想删除 item 元素的可拖动部分。

这是JS的代码

  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  
  $('.addrow').click(function(){
  $( "#sortable" ).append( "<li class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>Item NEW</li>" );

  });

html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<div class="addrow">Add new row</div>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>

请告知如何删除可拖动元素

标签： javascripthtmljquery

解决方案

  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  
  $('.addrow').click(function(){
  $( "#sortable" ).append( "<li class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>Item NEW <span class=\"delete\">DELETE</span></li>" );

  });
  
  $('body').on('click', '.delete', function() {
      $(this).parent('li').remove();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<div class="addrow">Add new row</div>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <span class="delete">DELETE</span></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 <span class="delete">DELETE</span></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 <span class="delete">DELETE</span></li>
</ul>

请看第 12 行，您需要将其绑定到单击事件的上层 DOM 对象。

推荐阅读