jquery - jQuery - 使用退格按键事件删除列表项？

Question

我希望能够单击列表项，然后按退格键将其删除。我将如何使用 jQuery 来做到这一点？

$('<li>Click Me</li>')
.appendTo('#list')
.click(function(){
   $(this).addClass('delete');
   $(this).focus(); // doesn't seem to do anything maybe??
})
.keypress(function(e){
    // this event handler doesn't fire
    var key = (e.keyCode ? e.keyCode : e.which);
    if (key === 8) {
        if ($(this).hasClass('delete'))
            $(this).remove();
    }
});

这是我的jsfiddle：

http://jsfiddle.net/prRVc/

看起来我无法将按键事件附加到列表项。

Answer 1

您不能在列表元素上使用焦点。您将一无所获：) 尝试使用另一种解决方案，为文档按键创建单独的处理程序，并使用“删除”类处理列表：

$(document).keypress(function(e){
    var key = (e.keyCode ? e.keyCode : e.which);
    if (key === 8) {
        $('li.delete').remove();
    }
});

Answer 2

您需要尝试在文档级别使用密钥处理程序。此外，使用“keydown”而不是“keypress”更安全。工作示例：http: //jsfiddle.net/DwX4e/

$('<li>Click Me</li>')
.appendTo('#list')
.click(function(){
   $(this).addClass('delete');
   $(this).focus();
})

$(document).on('keydown', function(e){
    if(e.keyCode === 8){
       $('li.delete').remove();
    }
});