Question

I am using the following code to highlighting the element :

$(".ss").live({ 
    mouseenter: function () { HighLight(this) }, 
    mouseleave: function () { OffLight(this); }, 
      keypress: function () { KeyOperation(this); }
});

function HightLight(s)
{
  $(s).css({border : "1px solid red"});
}
function OffLight(s)
{
  $(s).css({border : "0"});
}
function KeyOperation(s)
{
  $(s).remove();
}

KeyOperation() function is not executing on keypress.

Here i am trying to do that when user highlight any element, and while highlighting, if he press Delete key , than that element should be deleted.But this is not working, can anybody tell me how can i do this?

Answer 1

I believe this is what you’re after. Hovering over any .ss element will add a temporary class. If the user presses key 46 at any time, items with that class will be removed. See working fiddle below.

// Bind to a closer parent if possible
$(document)
    .on("keyup", function(e){
        if ( e.which === 46 ) $(".removeMe").remove(); 
    })
    .on("mouseenter mouseleave", ".ss", function(f){
        $(this).toggleClass("removeMe", f.type === "mouseenter" );
    });

It should be clear from this example that $.live is no longer encouraged for event delegation. From here on use $.on instead.

Fiddle: http://jsfiddle.net/YS7jH/2/