Question

当您在输入中输入值并按Enter键时，它将逐一显示，然后当您按退格键时，它将删除整个div，我不能再输入任何值。

如何通过先删除最后一个值来逐个删除这些值。例如，如果我有'狗，狮子，猫，猪'，当我按Backspace键时，它会首先移除猪，然后是猫，然后狮子，最后一只狗。当我进入鸟类时，它会出现在鸟类身上。

我怎样才能做到这一点？

$("#input").keydown(function(event) {

  if (event.which == 13) {
    event.preventDefault();

    //put input value into div
    var value = $('#input').val();
    $('#test2').text($('#test2').html() + " " + value);

  }
  //remove div when press backspace key
  if ($('#input').val() == '' && event.which == 8) {
    $('#test2').remove();
  }

});

.test {
  display: inline-block;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="test" id="test0">dog</div>
<div class="test" id="test1">lion</div>
<div class="test" id="test2">cat</div>

<input type="text" id="input" />

另外http://jsfiddle.net/4y1b1j8g/17/

Answer 1

按下退格键，您要删除最后一个.test元素，您可以使用:last选择器。

我还建议您修改输入印刷机上的逻辑，即添加文本以便它附加一个全新的div元素，而不是将其全部放在现有的#test2 div中。然后，这将允许单独删除它们。试试这个：

$("#input").keydown(function (e) {
    var $input = $('#input');
    if (e.which == 13) {
        e.preventDefault();
        $('<div />', { class: 'test', text: $input.val() }).insertBefore($input);
        $input.val(''); // remove the entered text from the input
    }
    else if ($input.val() == '' && e.which == 8) {
        $('.test:last').remove();
    }
});

Updated fiddle

值得注意的是，这是非标准行为，可能会让您的用户感到困惑。

Answer 2

你去......

if(  $('#input').val() == ''  &&  event.which == 8){
                   var x = $('#test2').text(); console.log(x);
                   x= x.split(" ");
                   x.pop();
                   $('#test2').html(x.join(" "));
    }

工作Fiddle

如何在按键上逐个删除元素？

2 个答案: