在jQuery框架中从键盘删除所选项目

Question

i have done frame for drag and drop elements in jQuery. now i want to delete the element from the frame as per requirements.the deletion should from the keyboard. I am trying and can select the item, but cant delete the selected item. my code like that..

        //Select the element
        jQuery(function() {
            jQuery ("#frame").selectable();
        });
        //move to trash_icon
        jQuery
HTML code...
  <div id="frame">
  <span id="title"></span>
  <div id="tbldevs" > </div>
  </div><!-- end of frame -->

i want to know is there any function in jQuery delete can be happened from keyboard.

Answer 1

You need to simply handle keyboard events, like so:

HTML:

<div id="frame">
    <span id="title">My Title</span>
    <div id="tbldevs">
        <div id="item1"> This is item 1</div>
        <div id="item2"> This is item 2</div>
    </div>
    <input type="button" id="sel-cancel" value="Cancel Select"/>
</div>

JS:

jQuery(function() {
    //make the elements selectable
    $("#tbldevs").selectable();

    //handle the events in every element. Only applies to elements which can be handle focus
    $('*').keypress(function(event) {
        if ( event.which == 100 ) { //this is the keycode. 100 is the 'd' key. The delete key is difficult to bind.
            $('.ui-selected').remove();
            //you can add ajax calls here to remove items from the backend
         }
    });
});

NOTE: The following code only removes the elements from the HTML tree.