将输入文本添加到列表中，清除文本。单击关闭 class，删除父 li

Question

我是 javascript 和 jquery 的初学者。我希望用户在输入字段中输入文本，按回车键，清除字段，然后将文本添加到列表中。在列表项中应该有一个 link 将其从列表中删除。

HTML

<ul id="list">
  <li><input type="text" id="text" placeholder="Enter your text" /></li>
  <li>text<a href="#" class="close">x</a></li>
</ul>

JS

$("input").on("keydown",function search(e) {
  if(e.keyCode == 13) {
    var text = $('#text').val();
    if(text.length){
      $('<li />', {html: text}).appendTo('ul.list');
    }
    event.currentTarget.value = "";
  }
});

$('.close').on('click', '.itemDelete', function() {
  $(this).closest('.li').remove();
});

link 到 plunker: https://plnkr.co/edit/lGemDbBsoklXCGASM8Qd

Answer 1

这是一个简单的例子。诀窍是使用 keyup 事件处理程序，然后确保按下的是回车键 (13)。然后你可以使用 jquery 将 li 附加到 ul 为了满足你删除列表项的要求，你基本上是说只删除你点击的列表项？

HTML

    <input id="myInput" type="text" />
    <ul id="list">
        <li>text<a href="#" class="close">x</a></li>
    </ul>

JavaScript

$('#myInput').keyup(function (e) {
    if (e.which == 13) {
        $('#list').append($('<li />').append($('<a />', {href: '#', text: $('#myInput').val()}).click(function (e) {
            $(this).parent().remove();  
        })));
        $('#myInput').val('')
    }
});

Answer 2

好的，成功了。如果您想忽略我的代码进行批评，请随意。

Javascript

$('#myInput').keyup(function (e) {
    if (e.which == 13) {
        var text = $('#myInput').val();
        var close = '<li>' + text + '<a href="#" class="close">x</a></li>';

        $('#list').append(close);
        $('#myInput').val('');
      }
});

$("#list").on( "click", ".close", function(){
  $(this).parent().remove();
});

笨蛋：https://plnkr.co/edit/lGemDbBsoklXCGASM8Qd

将输入文本添加到列表中，清除文本。单击关闭 class，删除父 li

Add input text on enter to list, clear text. On click close class, remove parent li

javascript

jquery

list

parent