CODEWITHSUNDEEP
javascripthtmljquery
Pheonix
Pheonix

Reputation: 177

Delete a dragable section for sortable in JQUERY

I want to delete a draggable section of the item element.

Here is the code for 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>

Please advise on how to delete a draggable element

Upvotes: 0

Views: 19

Answers (1)

Wils
Wils

Reputation: 1231

  $( 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>

Please look at line 12, you will need to bind it to an upper level DOM object for the click event.

Upvotes: 1

Related Questions